弹性布局-flex

最新推荐文章于 2024-12-14 15:27:31 发布

原创最新推荐文章于 2024-12-14 15:27:31 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

flex是Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

弹性布局的核心是容器（flex container）和项目（flex item）。容器定义了一个 flex 上下文，而项目是容器内的弹性元素。弹性容器通过 flex 属性来指定弹性容器的主轴方向（水平或垂直）和弹性项目的排列方向（起始端对齐，居中对齐，结束端对齐，等分对齐等）。

使用弹性布局的主要优点包括：

简单易用：弹性布局是一种非常容易学习和实现的布局方式，可以使用一些简单的 CSS 属性就能实现复杂的布局效果。
自适应布局：弹性布局可以根据不同的屏幕尺寸和设备方向来自适应地调整布局，让页面在不同设备上都能够呈现出最佳的效果。
方便的对齐方式和排列方式：弹性布局提供了一系列对齐方式和排列方式，可以很方便地实现各种对齐效果，也可以让开发者根据实际需要选择合适的排列方式
可读性好：使用弹性布局可以让页面代码更加清晰和易读，不需要使用复杂的布局技巧和工具，可以更加专注于业务逻辑的实现。

CSS中的flex布局具有以下属性：

container的属性

flex-direction ：用来决定主轴的方向
1. row 默认值，主轴方向为水平方向从左到右
2. row-reverse 主轴方向为水平方向从右到左
3. column 主轴方向垂直方向从上到下
4. column 主轴方向垂直方向从下到上
flex-wrap：用来决定子元素（item）超出父容器（flex container）时是否换行
1. nowrap 默认值不换行
2. wrap 换行
3. wrap-reverse 换行，是以相反顺序，第一行在下方
flex-flow：是前两个属性flex-direction和flex-wrap双属性的简写： flex-flow：flex-direction flex-wrap
justify-content：设置弹性盒子中元素在主轴上的对其方式
1. flex-start 默认值，左对齐
2. flex-end 右对齐
3. center 居中
4. space-between 两端对齐，item之间间隔相等
5. space-around item两侧的间隔相等
align-items ：设置弹性盒子中的元素在侧轴方向上的对其方式
1. stretch 默认值，项目被拉伸以适合容器
2. center 位于中央
3. flex-start 位于顶部
4. flex-end 位于底部
5. baseline 与flex container的基线对齐
align-content：与justify-content属性类似，可以在弹性盒子的侧轴还有多余空间时，调整容器内item的对其方式
1. stretch 默认值将项目拉伸以占据剩余空间
2. center 居中排列
3. flex-start 在顶部排列
4. flex-end 在容器底部排列
5. space-between 多个项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
6. space-around 多个项目均匀分布在容器中，并且每行的间距（包括容器边缘的间距）都相等

item的属性

order：设置item的排列顺序。属性值为number类型，默认值为0，数值越小，排列越靠前
align-self：允许为当前item设置不同于其他item的对其方式，该属性可以覆盖align-items属性的值
1. auto 默认值，便是元素集成其父容器的align-items属性值，如果没有父容器，则为stretch
2. strtch item被拉伸以适应容器
3. center 位于容器的中间
4. flex-start 位于容器的顶部
5. flex-end 位于容器的底部
6. baseline 与容器的基线对齐
flex：是flex-grow、flex-shrink、flex-basis三个属性的简写
1. flex-grow （必填参数），设置项目相对于其他item的增长量，默认值为0；
2. flex-shrink（选填参数），设置项目相对于其他item的收缩量，默认值为1；
3. flex-basis（选填参数），合法值为auto（默认值，表示自动）、inherit（表示从父元素集成该属性的值）或者以具体的值“%”、“px”、“em”等单位的形式。