css (11)

Flex 布局

伸缩盒

伸缩盒(Flexible Box) 模型如下，flex 布局由父级容器 flex container 及其下一级子元素 flex items 构成。

/* To use flexbox layout just set the display property on the parent HTML element */
.flex-container {
  display: -webkit-flex;
  display: flex; /* or inline-flex */
}

flex 布局在线 demo 戳这里 👈👈👈 。👉👉👉青蛙🐸小游戏戳这里

设置 flex 布局以后，子项目(item)的 float、clear 和 vertical-align 属性将失效。

container 属性

flex 容器上有以下六个属性:

属性	描述
flex-direction	定义主轴(main axis)的排列方向
flex-wrap	定义是否换行显示
flex-flow	flex-direction 和 flex-wrap 的复合属性，默认值为 no wrap
justify-content	定义项目在主轴上的对齐方式
align-items	定义项目在交叉轴(cross axis)上的对齐方式
align-content	多根轴线的对齐方式，单轴线无效

flex-direction

/* 定义主轴(main axis)的排列方向 */
/* 注意当你调转行或列的方向后，flex-start 和 flex-end 对应的方向也被调转了 */
flex-direction：row | row-reverse | column | column-reverse

flex-wrap

/* 定义是否换行显示，主轴默认为一排显示 */
flex-wrap：nowrap | wrap | wrap-reverse

flex-flow

/* flex-direction 和 flex-wrap 的复合属性，默认值为 no wrap */
flex-flow：<' flex-direction '> || <' flex-wrap '>

justify-content

/* 定义项目在主轴上的对齐方式 */
justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly

align-items

/* 定义项目在交叉轴(cross axis)上的对齐方式 */
align-items: flex-start | flex-end | center | baseline | stretch;

align-content

/* 多根轴线的对齐方式，布局思路同上。如果项目只有一根轴线(非换行)，该属性不起作用 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

item 属性

flex 项目上有以下六个属性

属性	描述
order	定义项目的排列顺序
flex-grow	定义扩展比率，索取父容器的剩余空间
flex-shrink	定义了项目的缩小比例
flex-basis	定义项目在主轴上的对齐方式
flex	flex-grow、flex-shrink 和 flex-basis 的复合属性，默认值为 0 1 auto
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

order

/* 定义项目的排列顺序。数值越小，排列越靠前，默认为 0 */
order：<integer>

flex-grow

/* 索取父容器的剩余空间，即父容器空间 - 子容器 * flex-basis/width */
/* 定义扩展比率。不允许负值，默认为0，即如果存在剩余空间，也不放大 */
flex-grow：<number>

flex-shrink

/* 定义了项目的缩小比例。不允许为负值，默认为 1，即如果空间不足，该项目将缩小 */
flex-shrink：<number>

flex-basis

/* 定义了在分配多余空间之前，项目占据的主轴空间(main size) */
flex-basis: <length> | auto; /* default auto */

flex

/* flex-grow、flex-shrink 和 flex-basis 的复合属性，默认值为 0 1 auto */
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

align-self

/* 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 */
/* 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch */
align-self：auto | flex-start | flex-end | center | baseline | stretch

flex / grid 网页布局 demo 👈👈👈

参考链接

1. CSS参考手册 - flex
2. A Visual Guide to CSS3 Flexbox Properties By Dimitar Stojanov
3. A Complete Guide to Flexbox By Chris Coyier
4. Flex 布局教程：语法篇 By 阮一峰
5. 深入理解 css3 中的 flex-grow、flex-shrink、flex-basis By ZhoonChen