flex 弹性盒子布局

Posted syf976561581

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex 弹性盒子布局相关的知识,希望对你有一定的参考价值。

是什么:
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。
优点:
flex布局也叫弹性布局,可以简便、完整、响应式地实现各种页面布局
注意:
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
常用属性:
flex-direction:设置主轴的方向
  1. row 默认值从左到右
  2. row-reverse 从右到左
  3. column 从上到下
  4. column-reverse 从下到上
justify-content:设置主轴上的子元素排列方式
  1. flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
  2. lex-end 从尾部开始排列
  3. center 在主轴居中对齐(如果主轴是x轴 则水平居中)
  4. space-around 平分剩余空间
  5. space-between 先两边贴边 再平分剩余空间(重要)
flex-wrap:设置子元素是否换行
  1. nowrap 默认值,不换行
  2. wrap 换行
align-content:设置侧轴上的子元素的排列方式(多行)
  1. flex-start 默认值 在侧轴的头部开始排列
  2. flex-end 在侧轴的尾部开始排列
  3. center 在侧轴的中间显示
  4. space-around 子项在侧轴平分剩余空间
  5. space-between 子项在侧轴先分布在两头,再平分剩余空间
  6. stretch 设置子项元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行)
  1. flex-start 默认值 从上到下
  2. flex-end 从下到上
  3. center 挤在一起居中(垂直居中)
  4. stretch 拉伸

flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

align-content 和align-items区别
  1. align-items 适合于单行情况下,只有上对齐、下对齐、居中和拉伸
  2. align-content 适合于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、配剩余空间等属性值
    总结就是单行找align-items 多行找align-content
order属性定义项目的排列顺序 数组越小,排列越靠前,默认为0;
align-self : 控制子项自己在侧轴上的排列方式
align-self属性: 允许单个项目与其他项目不一样的对齐方式,可以覆盖align-items属性 默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
flex-grow: flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex属性: flex属性定义子项分配剩余空间,用flex来表示占多少份数

以上是关于flex 弹性盒子布局的主要内容,如果未能解决你的问题,请参考以下文章

CSS3--Flex弹性盒子布局:使用弹性盒子模型布局微信客户端

CSS3--Flex弹性盒子布局:弹性布局和传统布局响应对比

CSS3--Flex弹性盒子布局: flex项目的属性

CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性

弹性盒子布局(flex布局)

CSS3--Flex弹性盒子布局: 实例篇-圣杯布局