Flex弹性布局

最新推荐文章于 2023-03-29 13:42:09 发布

shareclub

最新推荐文章于 2023-03-29 13:42:09 发布

阅读量218

点赞数 1

分类专栏： CSS3 文章标签： Flex布局 css3

本文链接：https://blog.csdn.net/qq_39110538/article/details/112272715

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Flex布局（Flexible Box）是CSS3的一种布局模式，提供最大灵活性。本文详细介绍了Flex容器的属性，如flex-direction、flex-wrap、justify-content、align-items等，以及成员属性，如order、flex-grow、flex-shrink、flex-basis。通过示例解析了成员如何分配多余或不足的空间，并提供了相关学习资源链接。

摘要由CSDN通过智能技术生成

简介

Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性

容器

任何容器都可以指定Flex布局，设置后，子元素的float,clear,vertical-align都失效

.box {
  display: flex;
  display: inline-flex;   //行内元素也可以使用Flex布局
}

容器属性

flex-direction
定义容器的子元素的排列方向

row（默认值）: 水平方向，起点为左边
row-reverse: 水平方向，起点为右边
column: 垂直方向，起点为上端
column-reverse: 垂直方向，起点为下端

flex-wrap
定义如果一条轴排不下时，怎么换行

nowrap（默认值）: 不换行
wrap: 换行，第一行在上方
wrap-reverse: 换行，第一行在下方

flex-flow
flex-direction属性和flex-wrap属性的简写，默认row nowrap

flex-flow: row nowrap

justify-content
定义子元素在主轴（水平轴）的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，子元素之间间隔相等
space-around：每个项目两边间隔相等

align-items
定义成员在交叉轴（垂直轴）上的对齐方式

stretch（默认值）：占满整个容器高度
flex-start: 上端对齐
flex-end：下端对齐
center：中点对齐
baseline：子成员中的第一行文字的基线对齐

align-content
定义多行子成员的对齐方式，如果只有一行，则该属性不起作用

stretch（默认值）：每行高度相等，且行间，行与边框间隔相等
flex-start: 上端对齐
flex-end：下端对齐
center：中点对齐
space-between：与上下两端对齐，行间间隔相等
space-around：每行上下间隔相等

成员属性

order
定义成员的排列顺序，数值越小越靠前，默认为0
flex-grow
值为非负数，定义成员瓜分剩余空间的比例，数值越大占用空间越大，默认为0，即不放大

分配原则：
如果只有一个成员设置了 flex-grow 属性值：

如果flex-grow值小于1，则分配给它的是总剩余空间和这个比例的计算值。
如果flex-grow值大于1，则独享所有剩余空间。

如果有多个成员设置了 flex-grow 属性值：

如果 flex-grow 值总和小于1，则分配给元素的是总剩余空间和当前元素设置的 flex-grow 比例的计算值。
如果 flex-grow 值总和大于1，则所有剩余空间被利用，分配比例就是 flex-grow 属性值的比例。

示例：
容器为1000px，有6个100px的成员，则剩余400px的空间；

单个成员设置flex-grow值，如果一个成员设置了flex-grow: 0.5，则该成员空间要增加0.5*400px = 200px；如果设置了flex-grow: 1(或大于1)，则该成员空间要增加400px；
多个成员设置flex-grow值，如果有4个成员设置了flex-grow：0.1; 由于0.1 * 4<1，则这四个成员的空间要增加0.1 * 400px=40px；如果有4个成员设置了flex-grow：1，由于1 * 4>1,则这四个成员的空间要增加1/(1+1+1+1) * 400px=100px。

flex-shrink
定义成员瓜分溢出空间的比例，数值越大占用空间越小，默认为1，即不缩小

分配原则：
如果只有一个成员设置了 flex-shrink：

flex-shrink 值小于1，则收缩的尺寸不完全，会有一部分内容溢出 flex 容器。
flex-shrink 值大于等于1，则收缩完全，正好填满 flex 容器。

如果多个成员设置了 flex-shrink：

flex-shrink 值的总和小于1，则收缩的尺寸不完全，每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的 flex-shrink 的值。
flex-shrink 值的总和大于1，则收缩完全，每个元素收缩尺寸的比例和 flex-shrink 值的比例一样。

flex-basis
定义成员的固定水平长度，默认为auto，即成员原本的大小
flex
flex-grow，flex-shrink和flex-basis的简介，默认为0 1 auto（后两个为可选属性）
align-self
定义单个与其他成员不一样的对齐方式

auto（默认值）：继承父元素的align-items属性，如果没有，则等同于stretch
stretch：占满整个容器高度
flex-start: 上端对齐
flex-end：下端对齐
center：中点对齐
baseline：子成员中的第一行文字的基线对齐

参考

阮一峰大神（文章中有详细的图，想看图的可以跳转到该链接）http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex-grow/flex-shrink详解：https://blog.csdn.net/u012372720/article/details/93998972