码迷,mamicode.com
首页 > 其他好文 > 详细

弹性布局display:flex

时间:2017-03-29 21:03:44      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:alt   padding   排列   reverse   flex   默认   baseline   ext   填充   

技术分享
1.flex-direction:设置伸缩项目的排列方式,即主轴的方向
row    设置从左到右排列
row-reverse    设置从右到左排列
column    设置从上到下排列
column-reverse    设置从下到上排列
2.justify-content:调整主轴方向上的对齐方式,对于弹性盒子内元素
flex-start    伸缩项目以起始点靠齐
flex-end    伸缩项目以结束点靠齐
center    伸缩项目以中心点靠齐
space-between    伸缩项目平局分布
space-around    同上,但两端保留一半的空间
ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        justify-content:space-around;
    }
    li{
        width:200px;
        height: 200px;
       
        text-align: center;
        line-height: 200px;
    }
技术分享
3.align-items:调整侧轴方向对齐方式
flex-start    伸缩项目以顶部为基准,清理下部额外空间
flex-end    伸缩项目以底部为基准,清理上部额外空间
center    伸缩项目以中部为基准,平均清理上下部额外空间
baseline    伸缩项目以基线为对齐,清理额外的空间
stretch    伸缩项目填充整个容器,默认
    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
    }
技术分享
    ul{
        padding: 0;
        width:800px;
        height:800px;
        list-style: none;
        border: 1px solid red;
        display: flex;
        flex-direction:row;
        align-items:stretch;
        justify-content:space-between;
    }
    li{
        width:200px;//指定高度,才能拉伸
       
        text-align: center;
        line-height: 200px;
    }
技术分享
4.flex-wrap控制是否换行
nowrap    默认值,都在一行或一列显示 ,会自动改变盒子内元素宽度
wrap    伸缩项目无法容纳时,自动换行
wrap-reverse    伸缩项目无法容纳时,自动换行,方向和 wrap 相反
5.align-content:堆栈排列,应用flex-wrap:wrap后换行进行控制,调整行之间的位置。用于多行,要设置父容器的高度
flex-start
flex-end
center
space-between
space-around
stretch默认
6.flex-flow:flex-direction和flex-wrap的简写
7.flex:控制伸缩容器内父盒子剩余空间的分配比例
    li{
       
        text-align: center;
        line-height: 100px;
        margin:10px;
    }
    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }
技术分享
 
    li:nth-child(1){
        flex:1;
    }
    li:nth-child(2){
        flex:3;
    }
    li:nth-child(3){
        flex:1;
    }
    li:nth-child(4){
        width:400px;
    }
技术分享
8.align-self,子元素覆盖父元素设置的align-items,属性值也是flex-start、flex-end、center、baseline、stretch
    ul{
        align-items:flex-start;
    }
    li:nth-child(2){
        align-self:center;
    }
技术分享
9.order,设置伸缩项目的顺序
    li:nth-child(1){
        order:3;
    }
    li:nth-child(2){
        order:1;
    }
    li:nth-child(3){
        order:2;
    }
技术分享

弹性布局display:flex

标签:alt   padding   排列   reverse   flex   默认   baseline   ext   填充   

原文地址:http://www.cnblogs.com/lee1993/p/6641564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!