首页 > 代码库 > CSS3 flexbox 布局 ---- flex项目属性介绍

CSS3 flexbox 布局 ---- flex项目属性介绍

  现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平方向。index.html 

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ul>

  index.css

ul {
    display: flex;  
    width: 600px;
    border: 1px solid red;
}
li { 
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    text-align: center;
    line-height: 100px;
    background-color: #8cacea;
}

  页面展示内容如下:

技术分享

  用在flex项目上的属性总共有5个,order || flex-basis || flex-grow || flex-shrink || flex

  order,顾名思议,顺序的意思,就是在不改变html 结构的情况下,给每一个flex项目重新排序,比如让第一个项目在最后面,它的取值是一个数字,正数,负数,0 都可以,如8。  浏览器在进行重绘时会根据这个数字对flex项目进行重新排列,规则就是从小到大,哪个项目的order 属性大,哪个项目排在后面,反之则在前面,如果有两个flex项目的order值相等,就按照它们在html中定义的结构进行排列。当然,每一个flex项目的order默认取值是0, 表示flex项目会按照html 中定义的结构进行排列。
   我们给每一个li 添加一个order 属性,根据规则,第三个项目排在第一位,第二个项目不变,第一个项目排在最后。
li:nth-child(1) {
    order: 3;
}
li:nth-child(2) {
    order: 2;
}
li:nth-child(3) {
    order: 1;
}

  页面的展示效果和我们预料的一致

技术分享

  flex-basis,  在flex-shinrk 和flex-grow 属性起作用以前,它控制每一个flex项目的默认大小,flex-shrink 和 flex-grow 我们下面会说到。flex-basis 的取值: auto || <length>,  length 就是我们平常用的一些属性值,如px, rem. 

  flex-basic 的默认取值是auto, 那auto 代表什么意思呢?

CSS3 flexbox 布局 ---- flex项目属性介绍