弹性盒模型，flex布局

弹性盒模型

  弹性盒子是css3的一种新布局模式，由容器（父元素）和项目（子元素）组成。

  弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

  引入弹性盒模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白区间。

  设置弹性盒子：display:flex或inline-flex; 区别：flex独占一行；inline-flex占据自己应该占据的位置，有点像inline-block，不支持margin:auto。

容器属性

 1.flex-direction  确定主轴和方向

• row 默认，从左到右
• row-reverse  从右到左
• column 从上到下
• column-reverse 从下到上

  2.flex-wrap 规定项目是否换行

• nowrap 默认，不换行
• wrap 换行，交叉轴从上到下
• wrap-reverse 换行，第一行在下，交叉轴从下到上

  3.flex-flow 复合属性，flex-direction和flex-wrap组成的复合属性

• row nowrap 默认，从左到右不换行

  4.justify-content 项目在主轴上的对齐方式

• flex-start 默认，主轴起点对齐
• flex-end 主轴终点对齐
• center 主轴居中对齐
• space-between 主轴上项目两端对齐，项目之间间隙平分空白
• space-around 主轴上的项目两侧间隔相等

  5.align-content 多行项目在交叉抽（与主轴垂直）上的对齐方式，不要和align-items共存

• stretch 默认，不设置项目高度的时候，占满平分整个交叉轴
• flex-start 交叉轴起点对齐
• flex-end 交叉轴终点对齐
• center 交叉轴居中对齐
• space-between 交叉轴上项目两端对齐，项目之间间隙平分空白
• space-around 交叉轴上项目两侧间隔相等

  6.align-items 单行项目在交叉轴上的对齐方式

• stretch 默认，不设置高度（竖直时）或宽度(水平时)占满整个交叉轴
• flex-start 交叉轴的起点对齐
• flex-end 交叉轴的终点对齐
• center 交叉轴的中间对齐
• baseline 文字基线对齐

项目属性

  1.flex-grow 设置项目的扩大比例

• 0 默认，不扩大
• 1 项目扩大填满容器，值为1时占一份，值为2时占两份，不支持负值

  2.flex-shrink 设置项目的收缩比例

• 1 默认，当容器宽度不够时，项目等比例缩小
• 0 不缩小
• 2,3...n 值越大缩小得越多

  3.flex-basis 设置项目初始长度

• auto 默认，项目没有设置宽度的时候，默认内容撑开宽度
• 0 不设置初始值
• number 规定项目的初始长度

  4.flex 复合写法flex:flex-grow flex-shrink flex-basis

• auto 相当于1 1 auto
• none 相当于0 0 auto
• 1 相当于1 1 0
• initial 相当于0 1 auto

  5.align-self 单独控制交叉轴一个项目的对齐方式

• auto 默认值，继承父容器的align-items
• 其他属性值与align-items一样

  6.order 规定项目在主轴上的排列顺序

• 0 默认，根据项目先后排列
• 整数，可为负值，数值越小排名越靠前

以上为个人理解，如有不当之处请指正！

原文链接:https://www.cnblogs.com/crackedlove/p/10273243.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有