MENU

我的笔记

CSS - MYNOTE

布局

Flex布局

父容器属性和值

.container {
display:flex /*改变原本的布局方式,使该容器变成弹性盒布局*/
flex-direction: row(default) | row-reverse | column | column-reverse /*父容器指定子元素的排列方向*/
flex-wrap: nowrap(default) | wrap | wrap-reverse  /*当子元素的大小超过父元素,是否换行*/
flex-flow: <‘flex-direction’> || <‘flex-wrap’> /*以上两者的缩写*/
justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;  
  /*定义是子元素沿主轴的对齐的位置,flex布局的主轴要么是横的要么就是竖的,因此这个属性是为了定义子元素如何在父容器之中对齐的方式*/
}

v2-c60dcf48c6def539458ba4f91a89d526_1440w

Read More