css中的flex布局

最新推荐文章于 2024-05-21 19:43:55 发布

愚舜

最新推荐文章于 2024-05-21 19:43:55 发布

阅读量227

点赞数

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

本文链接：https://blog.csdn.net/first_shun/article/details/90724087

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

flex布局为“弹性盒布局”，用弹性布局的方式有极大的灵活性，任何元素都可以使用flex布局，不管是行内元素或者是快级元素任何一个容器都可以作为flex布局。

.box{
    display:flex;
    display:-webkit-flex;    /*兼容性前缀*/
}

父元素拥有的相关属性：

1、主轴的方向：即子元素的排序方向。横向 | 反向横向 | 竖向 | 反向竖向。

flex-direction：row | row-reverse |column |column-reverse;

2、子元素的换行方式，不换行 | 正向换行 | 反向换行。

flex-wrap：nowrap | wrap |wrap-reverse;

3、flex-direction和flex简写形式。

flex-flow：flex-direction属性 flex-wrap属性。

4、项目在主轴上的对齐方式。主轴开始的方向对齐 | 结束的方向对齐 | 居中对齐 | 两边不留间距，中间等距对齐 | 每一个子元素两边留同样的边距对齐，边距不互相抵消。

justify-content：flex-start | flex-end | center | space-between | space-around;

5、交叉轴(和主轴垂直交叉的轴)上如何对齐方式。交叉轴头部对齐 | 交叉轴尾部对齐 | 交叉轴中间 | 基线对齐 | 交叉轴撑满对齐；

align-items：flex-start | flex-end | center | baseline | stretch;

子元素的相关属性：

1、排列顺序；数值越小越靠前。默认为0；数值一样时，按原有序列排序。

order：number;

2、放大比例，默认为0；

flex-grow：number;

3、缩小比例，默认为1

flex-shrink:number;

4、在分配多余空间之前，项目占据的主轴空间；默认值为auto；

flex-basis：auto;

5、flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex：1；

6、align-self属性，覆盖align-items属性，与其他兄弟元素不一样的对齐方式。除了auto，其他的属性与align-items属性相同。

align-self：auto | flex-start | flex-end | center | baseline | stretch;

最常见的两种布局方式(左右，上左右)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>常见flex布局</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html,body{
                height: 100%;
                margin:0;
                padding:0;
            }
            .container1{
                display: flex;
                display: -webkit-flex;
                height:100%;
                flex-direction: row;
            }
            .leftMenu{
                width:200px;
                background: #f00;
            }
            .rightBox{
                flex:1;
                background: #0f0;
            }
            .container2{
                height: 100%;
                display: flex;
                display: -webkit-flex; 
                flex-direction: column;
            }
            .top{
                height: 80px;
                background: #00f;
            }
            .bottom{
                flex: 1;
                display: flex;
                display: -webkit-flex;
            }
            .left{
                background: #0f0;
                width: 200px;
            }
            .right{
                background: #f00;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <!-- 第一类布局  左右布局 -->
        <div class="container1">
            <div class="leftMenu">
                菜单
            </div>
            <div class="rightBox">
                右边内容
            </div>
        </div>
        <!--第二类布局，上左右-->
        <div class="container2">
            <div class="top">头部内容</div>
            <div class="bottom">
                <div class="left">左侧内容</div>
                <div class="right">右侧内容</div>
            </div>
        </div>
    </body>
</html>

愚舜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的flex布局

flex布局为“弹性盒布局”，用弹性布局的方式有极大的灵活性，任何元素都可以使用flex布局，不管是行内元素或者是快级元素任何一个容器都可以作为flex布局。.box{ display:flex; display:-webkit-flex; /*兼容性前缀*/}父元素拥有的相关属性：1、主轴的方向：即子元素的排序方向。横向 | 反向横向 | 竖向 | 反向竖向...
复制链接

扫一扫

专栏目录