display flex 左右_CSS3 Flex常用布局

flex布局现在是挺常用的了，一般都是用于移动端开发，uni-app布局也是用flex的，当然布局也可以用浮动(float)布局.

Flex布局定义

display:flex;

需要在父元素里定义flex属性声明。

注意:单单在父元素写上display:flex; 是不会换行的。

.fu{

display:flex;

}

让子元素铺满

.fu{

display:flex;

flex:1;

}

flex-wrap:wrap;     (多个子元素宽度不够就会换行)

.fu{

display:flex;

flex-wrap:wrap;

}

flex-wrap:wrap-reverse;    (多个子元素宽度不够就会换行，但是从底部算起)

.fu{

display:flex;

flex-wrap:wrap-reverse;

}

flex-direction:column;    (让每个子元素换行)

.fu{

display:flex;

flex-direction:column;

}

justify-content:center;    (让子元素居中显示)

.fu{

display:flex;

justify-content:center;

}

justify-content:space-between;    (让子元素左右居左居右，如果有两个子元素，子元素不是50%的情况下，这时就会让子元素居左和居右显示(中间分离)

.fu{

display:flex;

justify-content:space-between;

}

基本的flex布局就这些了。

希望这边文章对您有帮助。