flex布局--超详细介绍

最新推荐文章于 2024-01-15 07:03:59 发布

珎珎啊

最新推荐文章于 2024-01-15 07:03:59 发布

阅读量4k

点赞数 4

分类专栏：前端文章标签： flex html 前端 css

本文链接：https://blog.csdn.net/qq_43363773/article/details/104580577

版权

前端专栏收录该内容

113 篇文章 1 订阅

订阅专栏

flex布局

又称“弹性布局”
语法是添加到父容器上的容器属性：display:flex;

作用在flex上的语法	作用在flex子项上的语法
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-shrink
align-item	flex-basis
align-items	flex
align-content	align-self

作用在父容器的语法

主轴与副轴

flex子项是主轴方向排列的，默认存在一条水平从左至右的主轴，和一条从上至下的副轴。

item1	item2	item3	item4

设置主轴方向的属性（flex-direction）

flex-direction：row；（布局的排列方向，主轴排列方向）
row为默认值，显示为行，方向为当前文档水平流方向。
flex-direction: row-reverse;(显示为行，但方向和row属性值相反）

item4	item3	item2	item1

flex-direction:column;（显示为列，主轴是从上至下，副轴为水平的。）

item1
item2
item3
item4

flex-direction:column-reverse;(显示为列，主轴从上至下，方向与column相反。)

item4
item3
item2
item1

是否进行换行处理（flex-wrap）

flex-wrap:nowrap;(默认值，不换行处理)
注：当子项的总宽度大于父容器的时候会自动收缩。

 *{margin: 0;padding: 0;}   
        #main{flex-wrap: nowrap;display: flex; width: 300px;height: 400px; flex-direction:row;margin: 30px auto; border: 2px solid black;}
        #main div{height: 100px;width: 100px; font-size: 30px;text-align: center; line-height: 100px;}
        #main div:nth-of-type(1){background: lemonchiffon; }
        #main div:nth-of-type(2){background: lightcoral; }
        #main div:nth-of-type(3){background: lightblue; }
        #main div:nth-of-type(4){background: lightseagreen; }

<body>
    <div id="main">
        <div>box1</div>
        <div>box2</div> 
        <div>box3</div>
        <div>box4</div>
    </div>
</body>

在这里插入图片描述

flex-wrap:wrap;（换行处理）

 *{margin: 0;padding: 0;}   
        #main{flex-wrap: wrap;display: flex; width: 300px;height: 400px; 
           flex-direction:row;margin: 30px auto; border: 2px solid black;}
        #main div{height: 100px;width: 100px; font-size: 30px;text-align: center; line-height: 100px;}
        #main div:nth-of-type(1){background: lemonchiffon; }
        #main div:nth-of-type(2){background: lightcoral; }
        #main div:nth-of-type(3){background: lightblue; }
        #main div:nth-of-type(4){background: lightseagreen; }

在这里插入图片描述

flex-wrap:wrap-reverse;(反向换行)

flex-flow（flex-direction和flex-wrap的复合写法）

css代码：flex-flow: column wrap;
在这里插入图片描述

justify-content

决定了主轴方向上子项的对齐和分布方式

justify-content:flex-start;(子项都去起始位置对其）
justify-content:flex-end;(子项都去结束位置对齐）
justify-content:center;(子项都去中心位置对齐)
justify-content:space-between;(表现为两端对齐，意思是多余的空白间距只在元素中间分配)

在这里插入图片描述

justify-content:space-around;(每个flex子项两侧的空白间距相等)

在这里插入图片描述

align-item(侧轴方向对齐方式)

默认：
在这里插入图片描述
折行：

align-content:flex-start;(上对齐)
align-content:flex-end;（下对齐）

在这里插入图片描述

align-content:center;（居中）

在这里插入图片描述

align-content

align-content跟justify-content相同的操作，侧轴的对齐方式。
默认多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的，值跟justify-content取值是相同的。

align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-evenly;

作用在父容器的语法

order（排序）

#main div:nth-of-type(1){background: lemonchiffon; order: 5;}
#main div:nth-of-type(2){background: lightcoral;order:4}
#main div:nth-of-type(3){background: lightblue;order:1;}
#main div:nth-of-type(4){background: lightseagreen;order: 2;} 
#main div:nth-of-type(5){background: limegreen;order:3;}

在这里插入图片描述

flex-grow(扩展，想要看到扩展效果必须有间隙)

在这里插入图片描述
flex-grow:0.5;(box2增加0.5倍的宽)

在这里插入图片描述
flex-grow:1(box2增加1倍的宽)

flex-shrink(收缩)

主要用于外层容器宽度不够的时候，子项收缩一定空间抵消不够的那部分宽。
正常的默认值是1；0表示不收缩；0.5收缩小一点；2收缩大一些（大小是跟正常缩放1进行比较的）
flex-shrink:0.5;
在这里插入图片描述

flex-shrink:1;
在这里插入图片描述

flex-shrink:2;
在这里插入图片描述

flex-basis和flex-grow

flex-basis是设置一个具体值
flex-grow是设置一个比例值
flex-basis:50px;(小于原宽度时box4收缩)
在这里插入图片描述

flex-basis:150px;(大于原宽度时box4放大)

在这里插入图片描述

flex(一种复合写法)

flex-grow flex-shink flex-basis
flex:1;==flex:1 1 0;==auto;
flex:0;==flex:0 1 0;==none;

默认 box1box2box3box4(flex:1;)
在这里插入图片描述
box1box3box4(flex:1;) box2(flex0;)

box1box3box4(flex:0;)box2(flex:1;)

box1box2box3box4(flex:0)

align-self

跟align-item操作很像，区别就是只针对某一个子项，指控制某一个flex子项的垂直对齐方式。
box1（align-item:flex-end) box2(align-item:center)box3(align-item:start)
在这里插入图片描述
注：

默认情况下，在弹性盒子中的子元素是左右排列的。（flex-direction:row;）
默认情况下(水平轴是主轴)，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
垂直轴是主轴的时候，默认情况下，当宽高不写的时候，高度由父容器决定，宽度由内容决定。
当子项的内容已经达到了父容器的最小宽高的时候就会出现溢出现象。
弹性布局中使用频率比较多的语法：
display:flex; flex-direction; justify-content;
align-item; flex;
弹性布局的优势是做一维布局，网格布局的优势是做二维布局。

扩展

Grid网格布局是一个二维的布局方法，纵横两个方向总是同时存在的。

作用在grid容器上	作用在grid子项上
设置列数 grid-template-colums	grid-column-start
设置行数grid-template-rows	grid-column-end
划分区域grid-template-areas	grid-row-start
复合写法grid-template	grid-row-end
列的间距grid-column-gap	grid-column
行的间距grid-row-gap	grid-row
复合写法grid-gap	grid-area
子项水平居中方式jusitify-items	justify-self
子项垂直居中方式align-items	align-self
复合写法place-items	place-self
整体网格的水平方式justify-content
整体网格的水平方式align-content
复合写法place-content