Flex 布局常见的几种方式

最新推荐文章于 2024-06-30 11:44:57 发布

weixin_33682790

最新推荐文章于 2024-06-30 11:44:57 发布

阅读量585

点赞数

原文链接：https://segmentfault.com/a/1190000014764252

版权

flex 之前的布局方式

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

flex 布局特点

块级元素侧重垂直方向、行内布局侧重水平方向，flex 布局是与方向无关的。
flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
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>

weixin_33682790

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Flex 布局常见的几种方式

flex container的六大属性：

flex item的属性

`flex container`的六大属性：

`flex item`的属性