flex是Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。
弹性布局的核心是容器(flex container)和项目(flex item)。容器定义了一个 flex 上下文,而项目是容器内的弹性元素。弹性容器通过 flex 属性来指定弹性容器的主轴方向(水平或垂直)和弹性项目的排列方向(起始端对齐,居中对齐,结束端对齐,等分对齐等)。
使用弹性布局的主要优点包括:
- 简单易用:弹性布局是一种非常容易学习和实现的布局方式,可以使用一些简单的 CSS 属性就能实现复杂的布局效果。
- 自适应布局:弹性布局可以根据不同的屏幕尺寸和设备方向来自适应地调整布局,让页面在不同设备上都能够呈现出最佳的效果。
- 方便的对齐方式和排列方式:弹性布局提供了一系列对齐方式和排列方式,可以很方便地实现各种对齐效果,也可以让开发者根据实际需要选择合适的排列方式
- 可读性好:使用弹性布局可以让页面代码更加清晰和易读,不需要使用复杂的布局技巧和工具,可以更加专注于业务逻辑的实现。
CSS中的flex布局具有以下属性:
container的属性
- flex-direction :用来决定主轴的方向
- row 默认值,主轴方向为水平方向从左到右
- row-reverse 主轴方向为水平方向从右到左
- column 主轴方向垂直方向从上到下
- column 主轴方向垂直方向从下到上
- flex-wrap:用来决定子元素(item)超出父容器(flex container)时是否换行
- nowrap 默认值 不换行
- wrap 换行
- wrap-reverse 换行,是以相反顺序,第一行在下方
- flex-flow:是前两个属性flex-direction和flex-wrap双属性的简写: flex-flow:flex-direction flex-wrap
- justify-content:设置弹性盒子中元素在主轴上的对其方式
- flex-start 默认值,左对齐
- flex-end 右对齐
- center 居中
- space-between 两端对齐,item之间间隔相等
- space-around item两侧的间隔相等
- align-items : 设置弹性盒子中的元素在侧轴方向上的对其方式
- stretch 默认值,项目被拉伸以适合容器
- center 位于中央
- flex-start 位于顶部
- flex-end 位于底部
- baseline 与flex container的基线对齐
- align-content:与justify-content属性类似,可以在弹性盒子的侧轴还有多余空间时,调整容器内item的对其方式
- stretch 默认值 将项目拉伸以占据剩余空间
- center 居中排列
- flex-start 在顶部排列
- flex-end 在容器底部排列
- space-between 多个项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部
- space-around 多个项目均匀分布在容器中,并且每行的间距(包括容器边缘的间距)都相等
item的属性
- order:设置item的排列顺序。属性值为number类型,默认值为0,数值越小,排列越靠前
- align-self: 允许为当前item设置不同于其他item的对其方式,该属性可以覆盖align-items属性的值
- auto 默认值,便是元素集成其父容器的align-items属性值,如果没有父容器,则为stretch
- strtch item被拉伸以适应容器
- center 位于容器的中间
- flex-start 位于容器的顶部
- flex-end 位于容器的底部
- baseline 与容器的基线对齐
- flex:是flex-grow、flex-shrink、flex-basis三个属性的简写
- flex-grow (必填参数),设置项目相对于其他item的增长量,默认值为0;
- flex-shrink(选填参数),设置项目相对于其他item的收缩量,默认值为1;
- flex-basis(选填参数),合法值为auto(默认值,表示自动)、inherit(表示从父元素集成该属性的值)或者以具体的值“%”、“px”、“em”等单位的形式。