Day11:Flex布局

参考:
来源: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属性

image

image.png

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

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

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

image

image.png

flex-wrap属性
默认情况下,项目都排在一条线
如果一条轴线排不下,就换行

image

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认):不换行
image

wrap:换行,第一行在上方
image

wrap-reverse:换行,第一行在下方
image

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;
}

image

image.png

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

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

image

image.png

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

image

image.png

order
flex-grow
flex-shrink
flex-basis
flex
align-self

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

.item {
  order: <integer>;
}

image

flex-grow属性定义项目的放大比例
默认为0,即如果存在剩余空间,也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

image

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

.item {
  flex-shrink: <number>; /* default 1 */
}

image

image.png

image.png


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

官方微信公众号

吹逼交流群:711613774

吹逼交流群

posted @ 2019-07-03 23:04 达叔小生 阅读(...) 评论(...) 编辑 收藏