博主信息

博文 45

粉丝 0

访问量 47003

专题推荐

flex简介

flex:弹性盒布局，这是一个针对布局的技术，之前是-table,div,css,position,float等；
在flex容器中，所有元素都是行内块；
在flex容器中，页面存在二个布局的参考轴，一个叫做主轴（元素的排列），还有一个交叉轴，控制元素的换行方向；
1、术语
1、容器：具有”display:flex”属性的元素
2、项目：flex容器的子元素
3、主轴：项目排列的轴线
4、交叉轴：与主轴垂直的轴线
2、容器属性
1、 flex-flow 主轴方向与换行方式
2、 justify-content 项目与主轴上的对齐方式
3、 align-items 项目在交叉轴上的对齐方式
4、 align-content 项目在多行容器中的对齐方式
3、项目属性
1、flex 项目的缩放比例与基准宽度
2、align-self 单个项目在交叉轴上的对齐方式
3、order 项目在主轴上的排列顺序
主轴排列
flex-direction:row |column;设置主轴；
flex-wrap:nowrap 换行
简写：flex-flow:row nowrap
垂直排列
```
  <style>
      * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
      }
      .container {
          display: flex;
          flex-flow: column nowrap;
      }
      .container .item {
          width: 5em;
          height: 5em;
          border: 1px solid #ccc;
          padding: 1em;
          margin: 1em;
      }
  </style>
<body>
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
  </div>
</body>
```
效果图
单行容器对齐方式
主轴对齐方式justify-content
设置项目在单行容器上的对齐前提：主轴上存在剩余空间
空间分配
1、将所有项目作为一个整体，在项目组俩边进行分配；
justify-content：flex-start 左对齐

justify-content：flex-end 右对齐

justify-content：flex-center 居中对齐

2、将项目作为单个独立个体，在项目之间进行分配；
justify-content：space-between 俩端对齐

justify-content：space-around 分散对齐

justify-content: space-evenly 平均对齐

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            border: 1px solid #ccc;
            display: flex;
            /* 左对齐 */
            justify-content: flex-start;
            /* 右对齐 */
            justify-content: flex-end;
            /* 居中对齐 */
            justify-content: center;
            /* 俩端对齐 */
            justify-content: space-between;
            /* 分散对齐 */
            justify-content: space-around;
            justify-content: space-evenly;
        }
        .container .item {
            width: 5em;
            height: 5em;
            border: 1px solid #ccc;
            padding: 1em;
            margin: 1em;
        }
    </style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

交叉轴对齐方式 align-items

1、默认拉伸 align-items: stretch;
2、上对齐 align-items: flex-start;
3、下对齐 align-items: flex-end;
4、居中对齐 align-items: center;

多行容器对齐方式 align-content

1、拉伸 align-content: stretch；
2、上对齐 align-content: flex-start；
3、下对齐 align-content: flex-end;
4、俩端对齐 align-content: space-between;
5、分散对齐 align-content: space-around;
6、平均对齐 align-content: space-evenly；

项目属性 flex

用在容器项目上的属性 flex：放大因子收缩因子基准宽度
默认值不放大可收缩当前容器中的widh；
flex:0 1 auto;
简写flex:initial;
允许放大和收缩
flex:1 1 auto;
简写flex:auto;
禁止放大和收缩
flex:0 0 auto;
简写flex:none;
如果只有一个数字，省掉后面第二个参数表示的是放大因子
flex:1等价于 flex:1 1 auto;

flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目的特征；
单个项目对齐方式align-self;支持定位

项目在主轴上的显示顺序
order：数值

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            border: 1px solid #ccc;
            display: flex;
            flex-flow: row wrap;
        }
        .container .item {
            width: 5em;
            height: 5em;
            border: 1px solid #ccc;
            padding: 1em;
            margin: 1em;
        }
        .container .item:first-of-type {
            order: 4;
            background-color: wheat;
        }
        .container .item:last-of-type {
            order: 1;
            background-color: yellowgreen;
        }
    </style>
<body>
    <div class="container">'
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

效果图

flex嵌套

实际工作中flex嵌套应用很多

  <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            display: flex;
        }
        .container .item {
            width: 5em;
            height: 5em;
            border: 1px solid #ccc;
            padding: 1em;
            margin: 1em;
        }
        .container .item:nth-of-type(4) {
            display: flex;
        }
    </style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
    </div>
</body>

效果图

flex快速实现水平垂直居中

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

 <style>
        .box {
            width: 15em;
            height: 15em;
            background-color: seagreen;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box div {
            width: 5em;
            height: 5em;
            background-color: sienna;
        }
    </style>
<body>
    <div class="box">
        <div></div>
    </div>
</body>

效果图

flex实现简单三列布局

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header,
        footer {
            height: 8vh;
            background-color: steelblue;
        }
        .container {
            height: calc(84vh - 1em);
            display: flex;
            margin: .5em 0;
        }
        .container aside {
            min-width: 15em;
            background-color: turquoise;
        }
        .container main {
            min-width: calc(100% - 31em);
            background-color: wheat;
            margin: 0 .5em;
        }
    </style>
<body>
    <header>头部</header>
    <div class="container">
        <aside>左侧</aside>
        <main>内容</main>
        <aside>右侧</aside>
    </div>
    <footer>底部</footer>
</body>

效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：md有序列表语法不对

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1209列表元素

2021-02-25 12:34:22

flex简介

1、术语

2、容器属性

3、项目属性

主轴排列

单行容器对齐方式

主轴对齐方式justify-content