Flex布局是CSS布局的一种，通过设置flex-direction、flex-wrap、justify-content、align-items和align-content等属性，可以灵活控制元素在主轴和交叉轴上的排列、换行和对齐方式。此外，order属性调整元素顺序，flex-grow和flex-shrink则定义了元素的放大和缩小比例。
flex有两条轴，水平的主轴和垂直的交叉轴
原理:通过给父元素添加flex属性，来控制盒子的位置和排列方式
flex-direction属性决定主轴的方向（即项目的排列方向）
- row:默认值。项目在主轴显示，起点在左端
- row-reverse:项目在主轴显示，起点在右端
- column:项目在垂直显示，起点在上端
- column-reverse:项目在垂直显示，起点在下端
flex-warp 设置是否在一行显示
- nowarp:默认值，不换行
- warp:换行，第一行在上方显示
- warp-reverse:换行，第一行在下方显示
justify-content属性定义了项目在主轴上的对齐方式
- flex-start:默认值，左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐，项目之间的间隔都相等
- space-around:每个项目两侧的间隔相等。
align-items属性定义项目在交叉轴上如何对齐
- flex-start:交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中心点对齐
- baseline:项目的第一行文字的基线对齐
- streth(默认值):如果项目未设置高度或设为auto，将占满整个容器的高度
align-content属性定义了多根轴线/多行 的对齐方式。
- flex-start:交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
- stretch（默认值）：轴线占满整个交叉轴。
order属性 调整项目排列顺序。数值越小，排列越靠前，默认值为0.允许负值
flex-grow属性定义项目的放大比例，默认值0 即如果存在剩余空间 也不放大
flex-shrink属性 项目缩小比例,默认值 1
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
