CSS3 Flex常用布局

flex布局现在是挺常用的了,一般都是用于移动端开发,uni-app布局也是用flex的,当然布局也可以用浮动(float)布局,但是在移动端没有那么灵活,所以小编做开发的时候,移动端用Flex,PC端用浮动。

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常用布局

发表评论

切图仔日常笔记博客