css面试题之Flex布局

最新推荐文章于 2024-05-14 05:05:23 发布

Strawberry96

最新推荐文章于 2024-05-14 05:05:23 发布

阅读量4.5k

点赞数

分类专栏： html/css 文章标签： flex

本文链接：https://blog.csdn.net/zhangying1996/article/details/110138989

版权

html/css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Flex布局

1、分清主轴和交叉轴

flex-direction 为 row 时，主轴是横向的，相反的为 column 时，主轴是纵向的。

2、搞清楚6个参数的含义

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: no-wrap | wrap | wra-reverse;
flex-flow: flex-direction || flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around; (主轴上的排列样式)
align-items:stretch | flex-start | flex-end | center | baseline;（交叉轴上的排列样式）
align-content: stretch | flex-start | flex-end | center | space-between | space-around; (多条主轴的对齐方式，比较少使用到）

3、DEMO

改变参数的值，来理解每个参数的含义，更加有助于理解和使用。

<!Doctype html>
<html>
    <head>
        <title>Flex布局</title>
    </head>
    <style>
        body{
            width:100%;
            background: #f0f;
            min-width:800px;
        }
        .content{
            width: 94%;
            padding:3%;
        }

        .box{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items:center ;
            align-content: center;
            flex-wrap: wrap;

        }
        .item{
            width:46%;
            height:200px;
            padding:1%;
        }

        .small-box{
            background:pink;
            width:100%;
            height:100%;
        }
    </style>
    <body>

        <div class="content">
            <div class="box">
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
                <div class="item">
                    <div class="small-box"></div>
                </div>
            </div>
        </div>

    
    </body>
</html>

Strawberry96

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css面试题之Flex布局

Flex布局1、分清主轴和交叉轴flex-direction 为 row 时，主轴是横向的，相反的为 column 时，主轴是纵向的。2、搞清楚6个参数的含义flex-direction: row | row-reverse | column | column-reverse; flex-wrap: no-wrap | wrap | wra-reverse; flex-flow: flex-direction || flex-wrap; justify-content: f..
复制链接

扫一扫