display:flex和三列布局

flex 弹性盒子
在父元素上设置display:flex
弹性改变父元素中的子元素
默认情况下:有一条水平的主轴,所有子元素按照主轴方向排列,在主轴方向没有宽度,在侧轴方向宽度填满。主轴方向元素变多时,自动挤压

父元素属性

flex-direction表示主轴方向:

1.row表示主轴水平方向排列,从左到右,侧轴垂直从上到下
row-reverse表示主轴水平,从右到左排列
2.column表示主轴垂直方向排列,从上到下
column-reverse表示主轴垂直方向排列,从下到上

justify-content表示主轴方向元素排列方式

flex-start:从开始位置排列
flex-end:从主轴结束位置排列
center:所有元素居中排列
space-between :所有空白填充在子元素之间,左右两个元素顶格
space-around:空白坏绕
space-evenly:表示均分所有的空白元素

aline-items表示侧轴的排列方式

flex-start:从开始位置排列
flex-end:从侧轴结束位置排列
center:所有元素居中排列

flex-wrap表示是否开启换行

no-wrap表示不允许换行
wrap表示可以换行(侧轴不会挤压元素,超出去就溢出)

aline-content表示侧轴的排列方式(整体侧轴)

前提:开启换行,有多行元素时
flex-start:从开始位置排列
flex-end:从侧轴结束位置排列
center:所有元素居中排列
space-between :所有空白填充在子元素之间,左右两个元素顶格
space-around:空白坏绕
space-evenly:表示均分所有的空白元素

弹性子集上的属性

aline-self表示自己单独一个元素的侧轴排列方式

start 表示自己单独在侧轴的起始位置
end 表示自己单独在侧轴的结束位置
center 表示自己单独居中

flex:设置弹性宽度

比如:设置几个flex的和为20,其中一个flex为5,则该元素占5/20的宽度
挤压宽度的时候优先挤压弹性宽度元素,当弹性宽度不能挤压的时候,挤压定宽元素

order设置优先级

三列布局

左右固定,中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            }
        html,body{
            width:100%;
            height:100%;
            overflow:hidden;
            }
        body{display:flex;}
        div.left{
        background:skyblue;
        width:200px;
        height:200px;
        }
        div.center{
        background:orange;
        height:200px;
        flex:5;
        }
        div.right{
        background:pink;
        height:200px;
        flex:5;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
    
</body>
</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页