<p><strong>横向布局</strong> ： 弹性盒子</p> 讯享网
- 给父级元素设成弹性盒子 display:flex;
- flex-direction 控制弹性盒子内子元素的排列方向
- flex-direction:column; 纵向
- column-reverse; 纵向反转 （从下往上，元素翻转）
- row: 横向
- row-reverse: 横向反转（从右向左并反转）
- flex-wrap 控制弹性盒子内子元素是否换行
- flex-warp:nowrap; 默认值。不换行，所有的flex子项都会在一行显示，即使容器内的空间不足以显示所有的子项。
- wrap 允许flex子项换行，如果一行空间不足以显示所有子项，剩余的子项会自动换行到下一行。
- order 设置弹性盒子内子元素的排列顺序 取值是整数，越小越靠前
- order:10;
- flex 控制弹性盒子内子元素的缩放 复合属性
- flex-grow: 1 ; 拉伸因子
flex-grow: 1 ; 拉伸因子
- flex-basis: ;基准因子
flex-basis 属性在CSS中定义了flex项目在flex容器中分配空间之前默认的大小，即在进行flex分配之前，项目的大小。它是flex布局中的一个重要属性，用于控制flex项目的基准大小，这个大小可以是固定的（比如像素、百分比等），也可以是自动。
- justify-content 控制弹性盒子内子元素的分布方式
- justify-content ：flex-start; 整体会跑到左边
- justify-content ：flex-end; 整体会跑到右边
- justify-content ：flex-; 空隙会放到元素和元素之间
- justify-content ：flex-around; 空隙会放到元素周围
- align-items 控制弹性盒子内子元素在垂直方向上的对齐方式
- start
- center 中心在一条轴线上
- end
- baseline 首行顶部对齐
- align-content :控制弹性盒子内多行的分布方式
- flex-start
- center
- space-around
- space-evenly
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/176461.html