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

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

2024-10-04 06:18:02   214人阅读

　　现在介绍用在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项目属性介绍


联系
我们