flex中项目(子元素)的属性

项目宽度(显示宽度) `flex-basis`

简介 : 项目在分配主轴剩余空间之前,项目所在的主轴空间的宽度
flex-basis 的优先级要高于width
auto(默认) : 为项目的原始宽度
也可以设置百分比,如果设置百分比的话,则是指在分配多余空间之前,项目占据主轴的空间

项目扩展 `flex-grow`

简介 : 将主轴上的剩余空间分配给项目,该属性的值在0-1之间
0(默认) : 不允许扩展
1 : 将剩余空间平均分配给每个项目

项目收缩 `flex-shrink`

简介 : 将项目上多出来的空间按比例在项目之间收缩
1(默认) : 允许收缩
0 : 不收缩

简写 `flex`

格式 : flex : flex-grow flex-shrink flex-basis
默认值为 : flex : 0 1 auto (不扩展,允许收缩,默认宽度)
flex : auto 等价于 flex : 1 1 auto
flex : initial 等价于 flex : 0 1 auto
flex : none 等价于 flex : 0 0 auto
flex : 2 等价于 flex : 1 1 auto
flex : 1 指当前项目可以自动伸展到所有的剩余空间

`align-self`

简介 : 单独设置某个项目在交叉轴上的对齐方式
flex-start 是默认值,还可以设置flex-end

`order`

简介 : 自定义项目在主轴上的排列顺序,默认值为0,值越小越靠前

顶部组件代码

注 : 注意引入css中的路径

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../../static/font/iconfont.css">
    <link rel="stylesheet" href="../../../static/css/_header.css">
</head>
<body>
    <header>
        <div class="header">
            <div class="left">
                <ul>
                    <li><a href="">网站首页</a></li>
                    <li><a href="">专题</a></li>
                    <li><a href="">网站导航</a></li>
                    <li><a href="">二手商品</a></li>
                    <li><a href="">讨论区</a></li>
                </ul>
            </div>
            <div class="right">
                <a href=""><i class="iconfont icon-huiyuan2"></i></a>
                <a href="">登录</a>
                <a href="">注册</a>
            </div>
        </div>
    </header>
</body>
</html>

具体样式

_header.css

@import "reset.css";
.header {
    height: 50px;
    background-color: #000000;
    position: relative;
}
.header .left {
    width: 400px;
    margin-left: 30px;
}
.header .left > ul {
    width: 400px;
    height: 50px;
    display: flex;
    align-content: center;
    justify-content: space-between;
}
.header .left > ul > li {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
.header .left > ul > li > a {
    display: inline-block;
    width: 50px;
    height: 50px;
    color: #ffffff;
}
.header .left > ul > li > a:hover {
    background-color: #fff;
    color: #000;
}
.header .right {
    margin-right: 30px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .right a {
    color: #ffffff;
}

reset.css

* {
    padding: 0;
    margin: 0;
}
a {
    text-decoration: none;
}

flex中项目(子元素)的属性

flex中项目(子元素)的属性

项目宽度(显示宽度) `flex-basis`

项目扩展 `flex-grow`

项目收缩 `flex-shrink`

简写 `flex`

`align-self`

`order`

顶部组件代码

页面布局

具体样式

手写笔记

相关文章

flex中项目(子元素)的属性

flex中项目(子元素)的属性

项目宽度(显示宽度) flex-basis

项目扩展 flex-grow

项目收缩 flex-shrink

简写 flex

align-self

order

顶部组件代码

页面布局

具体样式

手写笔记

相关文章

项目宽度(显示宽度) `flex-basis`

项目扩展 `flex-grow`

项目收缩 `flex-shrink`

简写 `flex`

`align-self`

`order`