乐趣区

关于前端:Flex-布局学习总结对齐方式

jiezi

一、Flex 布局是什么

Flex 布局是一种古代的、弹性的 CSS 布局模型，个别简称弹性布局，
全称为 Flexible Box Layout。它提供了一种更加高效、直观的形式来设计、排列和对齐容器中的子元素。Flex 布局实用于响应式设计，可能轻松适应不同屏幕大小和设施类型。

二、基本概念

容器默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做 main start，完结地位叫做 main end；穿插轴的开始地位叫做 cross start，完结地位叫做 cross end。

我的项目默认沿主轴排列。单个我的项目占据的主轴空间叫做 main size，占据的穿插轴空间叫做 cross size。

三、配置：

四、容器的对齐形式属性 

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

4.1 flex-direction

该属性决定了 Flex 容器中主轴的方向。主轴是 Flex 我的项目在容器中排列的方向

四个值：

row（默认值）：主轴为程度方向，终点在左端。row-reverse：主轴为程度方向，终点在右端。column：主轴为垂直方向，终点在上沿。column-reverse：主轴为垂直方向，终点在下沿。

4.2 flex-wrap

该属性定义了 Flex 容器中的 Flex 我的项目是否应该换行 

nowrap：所有 Flex 我的项目在一行上排列（默认值）。wrap：Flex 我的项目可能会换行，多个行重叠。wrap-reverse：Flex 我的项目可能会换行，然而穿插轴的起始和完结地位会调换。

4.3 flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。

.box {flex-flow: <flex-direction> <flex-wrap>;}

4.4 justify-content

该属性用于管制 Flex 容器中 Flex 我的项目在主轴上的对齐形式。

flex-start：我的项目在主轴起始地位对齐。flex-end：我的项目在主轴完结地位对齐。center：我的项目在主轴居中对齐。space-between：我的项目在主轴上均匀分布，首尾两个我的项目别离凑近容器起始和完结边界。space-around：我的项目在主轴上均匀分布，我的项目两侧的距离相等。

4.5 align-items

有主轴 那么就有穿插轴，该属性用于管制 Flex 容器中 Flex 我的项目在穿插轴上的对齐形式。

flex-start：我的项目在穿插轴起始地位对齐。flex-end：我的项目在穿插轴完结地位对齐。center：我的项目在穿插轴居中对齐。baseline：我的项目在穿插轴上以基线对齐。stretch：我的项目在穿插轴上拉伸以适应容器的高度（默认值）。

4.6 align-content

align-content 属性定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用 

flex-start：在穿插轴起始地位对齐。flex-end：在穿插轴完结地位对齐。center：在穿插轴居中对齐。space-between：在穿插轴上均匀分布，首尾两行别离凑近容器起始和完结边界。space-around：在穿插轴上均匀分布，行两侧的距离相等。stretch：在穿插轴上拉伸以适应容器的高度。

总结

依据学习与实际，大抵对元素的对齐的形式有了肯定理解。

参考

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.runoob.com/w3cnote/flex-grammar.html

退出移动版