Flex布局
原创
2021-6-21
21
html,css,flex,布局
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
弹性布局简化了网页布局的开发过程，提供了更灵活、响应式的布局方式。它适用于各种屏幕尺寸和设备类型，并能够快速适应不同的布局需求。
举个例子，我们用float和flex各自实现左右布局结构
要想实现上面左边div 200像素，右边根据父div宽度自适应,float是实现不了的，必须的设置固定宽度,div如果是500px，那right的宽度就是300px，但有些时候父元素的宽度是不知道的，除非通过js，这样代价就有点大了，写个简单样式还要js辅助。而用flex就简单多了，right直接写flex-grow:1即可，代码如下：
float 前提是必须知道父元素的宽度
flex
上面只是举了个很简单的例子，下面就对flex属性进行详细说明。
justify-content 项目在主轴上的对齐方式。
.exp{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.exp{ display: flex; background:#ffd9d9;padding: 10px;}
.exp1{justify-content:flex-start;}
.exp2{justify-content:center}
.exp3{justify-content:flex-end;}
.exp4{justify-content:space-between;}
.exp5{justify-content:space-around;}
.exp div{ width:30px; height: 30px; background: #ff6a00; margin: 0 5px;}
.exp div:first-of-type{ margin-left:0px}
.exp div:last-of-type{margin-right:0px}
align-items 项目在交叉轴上如何对齐。
.exp{
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-direction 决定主轴的方向，水平或者垂直
.exp{
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
flex-wrap 换不换行及换行的方向
.exp{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow flex-direction flex-wrap 简写 (设置主轴方向 和 是否换行)
.exp{
flex-flow: flex-direction || flex-wrap
}
flex-direction: column; /*以列为主轴*/
flex-wrap: wrap; /*换行*/
简写为 flex-flow: column wrap;
align-content 多根轴线的对齐方式,如果项目只有一根轴线，该属性不起作用
.exp{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
纵向排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
横向排列 类似百度图片
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
.exp div {
order: 数值;
}
flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.exp div {
flex-grow: 数值;
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.exp div {
flex-shrink: 数值;
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis
分配多余空间前项目占据的主轴空间。根据这个属性计算主轴是否有多余空间。默认值auto，即项目的本来大小
.exp div {
flex-basis: (px,%) | auto;
}
块中代表flex-basis设定的值
30%
100px
width:0
0
auto 有空格
0 有空格
0 有空格加 white-space: nowrap
30%
100px
width:0
0
auto 有空格
0 有空格
0 有空格加 white-space: nowrap
可以理解为：flex-basis是替换了width,他和width起到的作用差不多，但他们还是不同的
1.当width为0的时候，我们是看不到元素的。如上例100px 和 0 之间有个width:0
2.当flex-basis为0,或者为auto并且width没有设置值的时候(默认值为0)，该元素的大小由内容大小决定。也就是只要有内容，flex-basis是不会看不到元素的
3.设为auto和0也是有区别:为0的时候，如果内容文字有空格自动换行。这个可以通过设置white-space:nowrap解决。auto就没有这个问题。
flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
.exp div {
flex: none | 'flex-grow' 'flex-shrink' 'flex-basis'
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
align-self
与其他项目有不同的对齐方式，可覆盖align-items属性。默认值auto，表示继承父元素的align-items，如没有父元素，等同于stretch。
.exp div {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
auto
flex-start
center
flex-end
baseline
stretch
评论0 条