Flex布局方式与题

最新推荐文章于 2023-03-21 11:09:27 发布

吱吱复卿卿

最新推荐文章于 2023-03-21 11:09:27 发布

阅读量257

点赞数 1

分类专栏：笔记文章标签： css flex html

本文链接：https://blog.csdn.net/qq_46039848/article/details/109401841

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

关于Flex布局的使用方法

元素类型
- flex容器的特点
- - 水平垂直居中
  - - 扩展比率 flex-grow
    - - 题

Flex布局可以轻松完成水平垂直居中、置顶、置底等效果

元素类型

inline：内联（行内）元素
block：块元素
inline-block：内联（行内）块元素
flex：弹性元素

当一个元素的类型设置为flex时（display:flex;），它的内部排版布局方式将会发生很大的变化,此时，这个元素叫做一个flex容器

flex容器的特点

flex容器的元素是水平依次排序的，且默认不换行
float失效：在flex容器中，横向排列非常简单，不再需要做浮动，元素会自动横向排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				display: flex;
				width: 500px;
				height: 500px;
				margin: 100px;
				background-color: dimgray;
			}
			.box1,.box2,.box3{
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: darkred;
			}
			.box2{
				background-color: coral;
			}
			.box3{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

只是简单地将元素类型设置为flex,其中地三个div元素就自动变成横向排列了，如图
在这里插入图片描述

flex-wrap：刚刚提到flex容器默认不换行，如果需要换行，则需要使用这个属性，默认值为nowrap即不换行

flex-wrap:wrap：此时，放不下的元素会放在第二排

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				display: flex;
				width: 500px;
				height: 500px;
				margin: 100px;
				background-color: dimgray;
				flex-wrap: wrap;
			}
			.box1,.box2,.box3,.box4,.box5,.box6{
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: darkred;
			}
			.box2{
				background-color: coral;
			}
			.box3{
				background-color: greenyellow;
			}
			.box4{
				background-color: lightgreen;
			}
			.box5{
				background-color: lightblue;
			}
			.box6{
				background-color: mediumpurple;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
			<div class="box5">5</div>
			<div class="box6">6</div>
		</div>
	</body>
</html>

如图
在这里插入图片描述

flex-wrap:wrap-reverse：此时，放不下的元素会放在第一排

vertical-align失效：在flex容器中无论是垂直居中，还是对齐方式都会变得很简单
设置对齐方式时，使用属性justify-contenct，即主轴对齐方式

justify-content:flex-start; 表示开始对齐，即默认的样式
justify-content:flex-end; 表示结尾对齐，如图
justify-content:center; 表示中心对齐即居中，如图
justify-content:space-between; 表示两端对齐，如图
justify-content:space-around; 表示自动分配间隔，使每个元素的间距相同，就不用计算margin了，如图

主轴变换：主轴变换是flex布局最大的特点，flex-direction

flex-direction:row;这是这个属性的默认值，row为主轴，此时主轴为水平方向，如图
flex-direction:column;column为主轴，此时主轴为垂直方向，如图

flex-direction和justify-content一起使用可以实现更复杂的排版

水平垂直居中

当使用块元素（block）时，不能使用text-align属性（针对文本内容），于是要用到交叉轴
当flex-direction:row时，水平方向为主轴方向，则垂直方向即为交叉轴
通过justify-content可以设置主轴对齐方式，通过align-items可以设置交叉轴对齐方式，这两个属性都使用center时，就可以使任何元素都能够水平垂直居中了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平垂直居中</title>
		<style>
			.box{
				display: flex;
				width: 250px;
				height: 250px;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: lightgray;
			}
			.in{
				display: block;
				width: 100px;
				height: 100px;
				background-color: lightpink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="in"></div>
		</div>
	</body>
</html>

如图
在这里插入图片描述

扩展比率 flex-grow

flex-grow即父元素剩下的空间的瓜分比例
例如一个宽500px高100px的父元素含有两个高宽为100px的子元素，如图
在这里插入图片描述
现在给两个子元素都增添flex-grow属性，它的默认值为0，现在都设置为1，表示子元素1与子元素2将以1：1的比例瓜分父元素剩下的空间（这个比例可以任意更改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扩展比率</title>
		<style>
			.box{
				display: flex;
				width: 500px;
				height: 100px;
				background-color: lightblue;
			}
			.box1,.box2{
				width: 100px;
				height: 100px;
				flex-grow: 1;
			}
			.box1{
				background-color: hotpink;
			}
			.box2{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">子1</div>
			<div class="box2">子2</div>
		</div>
	</body>
</html>

在这里插入图片描述

flex-shrink:与flex-grow相对应的，即元素的多余空间削减比例

题

在这里插入图片描述
此题只要找到Z字形变换的规律就很简单了，代码如下

char * convert(char * s, int numRows){
    if (numRows == 1){
        return s;
    }
    else{
        int len = strlen(s);
        char* res = malloc(sizeof(char) * (len+2));
        int i, j, index = 0;
        for (i = 0; i < numRows; i++){
            for (j = 0; j < len; j++){
                if (j % (2*numRows-2) == i || j % (2*numRows-2) == 2*numRows-2-i){
                    res[index++] = s[j];
                }
            }
        }
        res[index] = '\0';
        return res;
    }
}

吱吱复卿卿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Flex布局方式与题

关于Flex布局的使用方法元素类型flex容器的特点水平垂直居中扩展比率 flex-grow题Flex布局可以轻松完成水平垂直居中、置顶、置底等效果元素类型inline：内联（行内）元素block：块元素inline-block：内联（行内）块元素flex：弹性元素当一个元素的类型设置为flex时（display:flex;），它的内部排版布局方式将会发生很大的变化,此时，这个元素叫做一个flex容器flex容器的特点flex容器的元素是水平依次排序的，且默认不换行float失效：
复制链接

扫一扫