Flex 布局常见的几种方式

头像
uccs
    阅读 7 分钟
    4

    flex 之前的布局方式

    • normal flow（正常流或叫文档流）
    • float + clear
    • position relative + absolute
    • display inline-block
    • 负margin

    flex 布局特点

    1. 块级元素侧重垂直方向、行内布局侧重水平方向，flex 布局是与方向无关的。
    2. flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
    3. flex 适用于简单的线性布局，更复杂的要交给gird 布局

    flex container的六大属性：

    属性 含义
    flex-direction 方向
    flex-wrap 换行
    flex-flow 上面两个的简写
    justify-content 主轴方向对齐方式
    align-items 侧轴对齐方式
    align-content 多行/列内容对齐方式（用的较少）

    解释：
    flex-direction：
    inherit 继承
    initial 起始
    row(默认) 一行展示
    row-reverse 反向一行
    column 一列排列
    column-reverse 反向一列排列

    flex-wrap：
    nowrap(默认) 不换行
    wrap 换行

    justify-content：
    space-between 多的空间放在所有元素中间
    space-around 多的空间放在所有元素周围
    flex-start 所有元素往主轴的起点靠
    flex-end 所有元素往主轴的终点靠
    center 所有元素往主轴的中间靠

    align-items：
    stretch(默认) 把所有元素伸开，和最高的那个元素对齐
    flex-start 所有元素往侧轴的起点靠，不要伸开
    flex-end 所有元素往侧轴的终点靠，不要伸开
    center 所有元素往侧轴的中间靠，不要伸开

    align-content：多行才有用，和justify-content用法差不多，只有一行的时候align-content没有任何效果。

    flex item的属性

    属性 含义
    flex-grow 增长比例(空间过多时)
    flex-shrink 收缩比例(空间不够时)
    flex-basis 默认大小(一般不用)
    flex 上面三个的缩写
    order 顺序(代替双飞翼)
    align-self 自身的对齐方式，可以让每个子元素有自己的对齐方式

    常见的一些布局方式：
    1、手机页面布局：上中下三栏，中间内容很多，高度自适应，上下高度固定。

    <head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        ul{
            list-style:none;
        }
        .container{
            height:100vh;
            display:flex;
            flex-direction:column;
        }
        header{
            height: 100px;
            background: #ddd;
        }
        footer ul{
            height: 100px;
            background: #ddd;
        }
        main{
            flex-grow:1;
            overflow:auto;
        }
        footer > ul{
            display: flex;
        }
        footer > ul > li{
            background: red;
            width:25%;
            height:100%;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>header</header>
        <main>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
            <p>段落</p>
        </main>
        <footer>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </footer>
    </div>
</body>

    2、产品列表布局：

    <head>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        ul{
            list-style:none;
            display: flex;
            flex-wrap: wrap;
            width:350px;
            margin:auto;
            border:1px solid black;
            justify-content: space-between;
        }
        li{
            width:100px;
            height: 100px;
            background:#ddd;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

    3、简单的PC页面布局：

    <head>
    <style>
       header{
           height:50px;
           background: #ddd;
       }
        footer{
            height: 50px;
            background: #ddd;
        }
       .content{
           display:flex;
       }
        .content > aside{
            width:120px;
            background: #444;
        }
       .content > main{
           height: 400px;
           flex:1;
           background: red;
       }
       .content > nav{
           width:100px;
           background:green;
       }
    </style>
</head>
<body>
    <header>header</header>
    <div class="content">
        <aside id="aside1"></aside>
        <main></main>
        <nav></nav>
    </div>
    <footer>footer</footer>
</body>

    4、完美居中布局：

    <head>
    <style>
        .parent{
            height:400px;
            background: #ddd;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            完美居中完美居中完美居中<br>
            完美居中完美居中<br>
            完美居中<br>
            完美居中<br>
        </div>
    </div>
</body>
    前端css
    uccs
    756 声望88 粉丝

    3年 gis 开发，wx:ttxbg210604

    « 上一篇
    css响应式页面
    下一篇 »
    简单的布局套路

    引用和评论

    推荐阅读
    头像
    你会处理 go 中的 nil 吗

    uccs赞 2阅读 482

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新