CSS中弹性盒子Flex的基本用法

css弹性盒子Flex的基本用法；

在介绍flex之前，大家先想一下，我们之前用html时布局都是怎么来写的，是不是大致分为三部分，左中右，左右部分用padding或者margin值来撑开，中间部分宽度自适应，大概如下图所示：

这是我们最常见的在html中一般就是左右绝对定位两边距离用padding-left和padding-right来设置，中间宽度100%；

CSS对于元素的显示方式display有多种属性值可取，知道基本的block、inline-block、inline属性值，设定浮动、定位、margin和padding的值可以很好地对元素进行布局，在设置垂直居中时，常常是采用设置边距的方法来实现，这样很难达到想要的效果，除此之外，如果想要元素对于不同的显示宽度进行排版的自动变换，想要实现也是很困难。这个时候，对元素显示方式设置flex属性值，再对元素及内容进行设置，可以很方便的达到这样的要求。

活不多说上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex三栏布局</title>
    <style>
        *{
            margin: 0;
            padding-right: 0;
        }
        header{
            width: 100%;
            height: 200px;
            margin-top: 10px;
            display: flex;
            display: -webkit-flex;
        }
        header div{
            height: 200px;
            border: 1px solid red;
            margin: 0px 10px;
        }
        header div:nth-child(1){
            width: 100px;
        }
        header div:nth-child(2){
            flex:1;
            -webkit-flex:1;
        }
        header div:nth-child(3){
            width: 100px;
        }

    </style>
</head>
<body>
    <header>
        <div>width</div>
        <div>宽度</div>
        <div>width</div>
    </header>
</body>
</html>

仅在父元素中设置了 display：flex 属性子元素设置flex：1；便实现了三栏布局；是不是很方便，既然flex如此强大，我们就来仔细了解flex的使用方法。

ps：flex是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

flex-direction：属性指定了弹性子元素在父容器中的位置，设置主轴方向，确定排列顺序。

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。

column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

例：column-reverse使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex排版</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">11111</div>
  <div class="flex-item">22222</div>
  <div class="flex-item">33333</div>  
</div>

</body>
</html>

justify-content ：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

flex-start ：紧挨开头依次填充，为默认值。

center ：居中，如果两侧空间不足，则两侧同时溢出。

flex-end ：紧挨尾部依次填充。

space-between ：如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start

space-around ：平均分布在该行中，两边各留一半间隔空间

例：center的用法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">11111</div>
  <div class="flex-item">22222</div>
  <div class="flex-item">33333</div>  
</div>

</body>
</html>

还有很多属性值，比如：

align-items属性：align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-wrap 属性：flex-wrap 属性用于指定弹性盒子的子元素换行方式。

align-content 属性：align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-self：align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

CSS中弹性盒子Flex的基本用法

猜你喜欢