Day11:Flex布局

2024-10-21 09:09:15

参考：

来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

网页布局是css的一个重点。

盒子模型

display属性

position属性

float属性

W3C提出了一种新的方案—-Flex布局

弹性布局

任何一个容器都可以指定为Flex布局

.box{

  display: flex;

}

行内元素也可以使用Flex布局

.box{

  display: inline-flex;

}

.box{

  display: -webkit-flex; /* Safari */

  display: flex;

}

设为Flex布局

子元素的float、clear和vertical-align属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction属性决定主轴的方向

.box {

  flex-direction: row | row-reverse | column | column-reverse;

}

flex-wrap属性

默认情况下，项目都排在一条线

如果一条轴线排不下，就换行

.box{

  flex-wrap: nowrap | wrap | wrap-reverse;

}

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

默认值为row nowrap

.box {

  flex-flow: <flex-direction> <flex-wrap>;

}

justify-content属性定义了项目在主轴上的对齐方式

.box {

  justify-content: flex-start | flex-end | center | space-between | space-around;

}

align-items属性定义项目在交叉轴上如何对齐

.box {

  align-items: flex-start | flex-end | center | baseline | stretch;

}

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {

  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {

  order: <integer>;

}

flex-grow属性定义项目的放大比例

默认为0，即如果存在剩余空间，也不放大

.item {

  flex-grow: <number>; /* default 0 */

}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

.item {

  flex-shrink: <number>; /* default 1 */

}

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774

最新文章

热门文章