CSS Flex 常用布局
🌙
手机阅读
本文目录结构
六、flex 布局 弹性布局（属于一维布局），给予容器控制内部元素的宽度、高度的能力。便于实现垂直居中的效果。
大部分浏览器都能支持，在 webkit 内核的浏览器需要加上 -webkit 前缀。
容器的 6 个属性：
flex-direction：row | row-reverse | column | column-reverse; // 决定主轴的方向
flex-wrap：nowrap | wrap | wrap-reverse; // 决定项目换行的情况
justify-content： flex-start | flex-end | center | space-between | space-around; // 项目在主轴的对齐方式
align-items： flex-start | flex-end | center | space-between | space-around; // 项目在交叉轴上的对齐方式
align-content： flex-start | flex-end | center | space-between | space-around | stretch; // 多根轴线的对齐方式，只有一根时则无效
flex-flow: <flex-direction> || <flex-wrap>; //flex-direction 属性和 flex-wrap 属性的简写形式，
项目的 6 个属性：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/
https://www.miidc.com/news/content50642.html
https://gitee.com/chendaiming/flex_layout#flex%E5%B8%B8%E7%94%A8%E5%B8%83%E5%B1%80
项目介绍 flex 简单布局，导入 css 后直接使用
使用说明
- 以行布局 .rbox 使用方法：
<div class="rbox">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果： 0
- 以列布局 .cbox 使用方法：
<div class="cbox">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果： 0
- 行布局自动换行 .rbox_wrap 使用方法：
<div class="rbox_wrap">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
结果： 0
- 布局参数 .df_1 ~ .df_9 使用方法：
<div class="rbox">
<span class="df_1">1</span>
<span class="df_1">2</span>
<span class="df_1">3</span>
</div>
<div class="rbox">
<span class="df_1">1</span>
<span class="df_2">2</span>
<span class="df_3">3</span>
</div>
结果： 0 0
- 内容 X 轴布局（左右布局） 使用 rbox: .box_x_center 左右居中 .box_x_start 靠左显示 .box_x_end 靠右显示 使用 cbox: .box_x_center 上下居中 .box_x_start 靠上显示 .box_x_end 靠下显示 使用方法：
<div class="rbox box_x_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_x_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果：
rbox box_x_center
cbox box_x_center
- 内容 Y 轴布局 （上下布局） 使用 rbox: .box_y_center 上下居中 .box_y_start 靠上显示 .box_y_end 靠下显示 使用 cbox: .box_y_center 左右居中 .box_y_start 靠左显示 .box_y_end 靠右显示 使用方法：
<div class="rbox box_y_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_y_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果： 0 0
- 内容 X + Y 轴居中 .box_center 使用方法：
<div class="rbox box_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果： 0 0
- 单个内容布局 （同上） .box_1_center .box_1_start .box_1_end 使用方法：
<div class="rbox">
<span>1</span>
<span class="box_1_center">2</span>
<span>3</span>
</div>
<div class="cbox box_center">
<span>1</span>
<span class="box_1_center">2</span>
<span>3</span>
</div>
结果： 0 0
- 多行内容布局 （配合 rbox_wrap 使用 ，没有添加 cbox_wrap, 不常用，也可直接配合 box_x_xxx 和 box_y_xxx 使用） .box_wrap_center 内容居中 .box_wrap_start 靠左 .box_wrap_end 靠右 .box_wrap_space_a 项目之间的间隔都相等 .box_wrap_space_b 两端对齐，项目之间的间隔都相等 使用方法：
<div class="rbox_wrap box_wrap_center">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a box_center">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a box_x_end">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
结果： 0 0 0 0
- 项目之间的间隔都相等 .box_space_a
- 两端对齐，项目之间的间隔都相等 .box_space_b 最后 内容也可以使用 flex 布局
<div class="rbox_wrap">
<span class="rbox box_center">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
0
