学习一定要理解CSS的Flex一篇搞定
在学习【CSS】时, 现代化布局解决方案: Flex 布局 非常方便快捷, 特别是水平垂直的解决方案, 用 Flex 就显得特别简单有没有! 今天就来深入学习一下.
CSS Flex 弹性盒子 布局
弹性盒子-MDN 即为 flexible box 就是我们通常说的 Flex
弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。
flex 容器: 父元素flex 项目: 子元素
通过给元素设置 display: flex, 使得该元素的布局为弹性布局, 如下设置 就把 section 容器设置成了弹性盒子(flex 容器), 其内部的子元素 section > .box 可进行方便的排列, 解决我们工作中的诸多常见问题
section { display: flex; } article { flex: 1; /* ... */ } 复制代码接下来我们看一下弹性盒子的子元素 article 可设置的一些属性, 通过这些属性显示子元素的排列方式.
注意：假如你想设置行内元素为
flexible box，也可以置display属性的值为inline-flex。
flex 弹性盒 items 排列方式
主轴(main axis), 即沿着
X 轴排列, 就是水平方向上的交叉轴(cross axis), 垂直于主轴的方向, 即
Y 轴, 就是上下排列的方式设置了
display: flex的父元素（如上面的<section>）称之为flex 容器（flex container）在
flex 容器中表现为柔性的盒子的元素被称之为flex 项（flex item）: （如上面的 元素。
flex 属性
先看一下 MDN 的解释: MDN 直达 Flex
flex
CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
当父元素申明 display: flex, 其子元素可有 flex 属性, 表示其在父元素这个弹性盒子内的表现.
此flex 属性是以下 CSS属性 的简写：
flex-growflex-shrinkflex-basis
按 父元素上的属性 和 子元素上的属性来区分
1. 添加在父元素上
1.1 display: flex/ inline-flex 1.2 flex-direction 改变主轴的方向 子元素排列方向 1.3 flex-wrap (换行) 分散子元素 1.4 flex-flow 简写(合并)flex-direction 和 flex-wrap 1.5 justify-content ( X 轴 )横向对齐 主轴上的对齐方式
侧轴上的对齐方式: 1.6 align-items ( Y 轴 )纵向对齐 1.7 align-content行之间的距离问题 单行不起作用 对齐方式调整之后, 上下没有间距
1.1 行内元素 flex
行内元素可设置 display: inline-flex;
1.2 改变主轴的方向: flex-direction
要调整元素的排列方向, 就是从前往后排列还是反过来排列, 我们可以用 flex-direction 属性。
这个 CSS 属性定义了元素在容器里摆放的方向，并且接受这些值：
row: 元素摆放的方向和文字方向一致。 (default)row-reverse: 元素摆放的方向和文字方向相反。column: 元素从上放到下。column-reverse: 元素从下放到上。
注意: 当你调转行或列的方向后,
justify-content的flex-start和flex-end对应的方向也被调转了。注意: 当
flex以列为方向时,justify-content控制纵向对齐，align-items控制横向对齐。
1.3 让子元素换行 flex-wrap
规定 flex 子元素必须在 单行 或 自动换行成多行.
flex-wrap 属性把元素分散开来。这个属性接受这些值：
nowrap:所有的元素都在一行。 (default)wrap:元素自动换成多行。wrap-reverse: 元素自动换成逆序的多行。
1.4 flex-flow 简写(合并)
flex-flow 合并 <flex-direction> 和 <flex-wrap>
这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个栗子: 我们可以用 flex-flow: row wrap 来设置行并自动换行。
语法:
flex-flow: <flex-direction> <flex-wrap>; 复制代码
1.5 主轴(X 轴横向)上的对齐方式 justify-content
justify-content 将 flex元素与主轴(x轴)对齐: 用于调整子元素 横向排列 的问题:
justify-content 这个 CSS 属性可以水平对齐元素，并且接受以下几个参数：
flex-start: 元素和容器的左端对齐。(default)flex-end: 元素和容器的右端对齐。center: 元素在容器里居中。space-around: 元素周围保持相等的距离。space-between: 元素之间保持相等的距离。 相对于space-around元素之间的距离会较大一些, 而元素到容器的距离较小一些.space-evenly
侧轴上的对齐方式
1.6. align-items 纵向对齐
align-items 在交叉轴(y轴)上对齐多个元素, 即调整子元素在 纵向排列 的问题.
align-items 这个 CSS 属性纵向对齐元素并且可选以下几个值：
flex-start: 元素与容器的顶部对齐。flex-end: 元素与容器的底部对齐。center: 元素纵向居中。baseline: 元素在容器的基线位置显示。stretch: 元素被拉伸以填满整个容器。(default)
1.7. align-content 行之间的距离问题
当交叉轴有多余空间时, 对齐容器的轴线.
这可能有些容易混淆，但 align-content 决定行之间的间隔，而 align-items 决定元素整体在容器的什么位置。只有一行的时候 align-content 没有任何效果。
你可以使用 align-content 来决定行与行之间隔多远。这个属性接受这些值：
flex-start: 多行都集中在顶部。flex-end: 多行都集中在底部。center:多行居中。space-between: 行与行之间保持相等距离。space-around: 每行的周围保持相等距离。stretch:每一行都被拉伸以填满容器。 (default)
2. 添加在子元素上
2.1 前后顺序: order: 0 2.2 放大比例: flex-grow: 0 2.3 缩小 flex-shrink: 1 2.4 简写: flex 2.5 自己对齐: align-self
2.1 子元素前后顺序 order
order 决定 flex子元素的顺序.
有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的 order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
2.2 放大比例: flex-grow: 0
2.3 缩小 flex-shrink: 1
2.4 简写: flex
2.5 自己对齐 align-self 控制单个元素对齐
另一个你可以使用的控制单个元素的属性是 align-self。这个属性接受和 align-items 一样的那些值。
flex-start: 元素与容器的顶部对齐。flex-end: 元素与容器的底部对齐。center: 元素纵向居中。baseline: 元素在容器的基线位置显示。stretch: 元素被拉伸以填满整个容器。 (default)
在线练习 Flex
熟练掌握需要多加练习才行, 收藏的在线练习 Flex 小破站:
作者：阿白756
链接：https://juejin.cn/post/7018169287827259423