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布局就这些了。

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

本站资源除特别声明外,转载文章请声明文章出处
东泰博客 » CSS3 Flex常用布局