css3伸缩盒模型第一章(主轴以及伸缩盒模型)

css3伸缩盒模型第一章(主轴)

一、伸缩盒模型简介

2009 年， W3C 提出了一种新的盒子模型 ------ Flexible Box （伸缩盒模型，又称：弹性盒
子）。
它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 ...
截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持。
伸缩盒模型的出现，逐渐演变出了一套新的布局方案 ------ flex 布局。

传统布局是指：基于传统盒状模型，主要靠： display 属性 + position 属性 + float
属性。

flex 布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

二、伸缩容器/伸缩项目

我们将父元素叫做伸缩容器，子元素称为项目，容器里面的元素都称为一个一个的项目

1. 伸缩容器

开启了 flex 的元素，就是：伸缩容器

给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容
器。

display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩
容器。

一个元素可以同时是：伸缩容器、伸缩项目。

2. 伸缩项目

伸缩容器所有子元素自动成为了：伸缩项目。

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项
目。

无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会"块状化"。

效果

代码

markdown 复制代码

<title>01.伸缩项目</title>
  <style>
     /* body {
       display: flex;
     } */

     .outer {
       width: 1000px;
       height: 600px;
       background-color: gray;

       /* 开启弹性布局,该布局开启后，只针对自己的子元素有效，孙子元素没有不起作用 */
       display: flex;
     }

     .inner {
       width: 200px;
       height: 200px;
       background-color: pink;
       border: 1px solid black;
       box-sizing: content-box;
     }

     .inner3 {
       display: flex;
     }

  </style>
</head>
<body>
    <div class="outer">
       <div class="inner">1</div>
       <div class="inner">2</div>
       <div class="inner inner3">
          <div>a</div>
          <div>b</div>
          <div>c</div>
       </div>
    </div>
    <!-- <div class="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
   </div> -->
</body>

三、主轴方向

伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边

是终点）。

属性： flex-direction

基本代码

markdown 复制代码

.outer {
       width: 1000px;
       height: 600px;
       /* border: 1px solid black; */
       background-color: #888;
       margin: 0 auto;

       /* 开启弹性布局 */
       display: flex;
 }      
.inner {
       width: 200px;
       height: 200px;
       background-color: paleturquoise;
       box-sizing: border-box;
       border: 1px solid pink;
     }
<body>
    <div class="outer">
       <div class="inner">1</div>
       <div class="inner">2</div>
       <div class="inner">3</div>
    </div>
</body>

row

默认方式, 主轴的方向从左到右

/* 方式1 row 从左到右默认方式*/

flex-direction: row;

row-reverse

跟上面相反，主轴的方向从右到左边

/* 方式2 从右到左边 */

flex-direction: row-reverse;

column

主轴的方向，从上到下垂直

flex-direction: column;

column-reverse

从下到上垂直

/* 方式4 从下到上垂直 */

flex-direction: column-reverse;

主轴换行方式

我们设置了伸缩项目后，里面的项目就好挤到一行，我们需要进行一个换行操作，我们需要做的是将内容撑多，放多个盒子，这样才好观察

属性：flex-wrap

基本代码

markdown 复制代码

   .outer {
       width: 1000px;
       height: 600px;
       /* border: 1px solid black; */
       background-color: #888;
       margin: 0 auto;

       /* 开启弹性布局 */
       display: flex;

       /* 主轴方向  从左到右  默认方式 */
       flex-direction: row;
 }
 .inner {
       width: 200px;
       height: 200px;
       background-color: greenyellow;
       border: 1px solid black;
       box-sizing: border-box;
     }
<body>
    <div class="outer">
       <div class="inner">1</div>
       <div class="inner">2</div>
       <div class="inner">3</div>
       <div class="inner">4</div>
       <div class="inner">5</div>
       <div class="inner">6</div>
       <div class="inner">7</div>
       <div class="inner">8</div>
    </div>
</body>

nowrap

方式1 不进行包装，默认方式全部挤到一起，尽可能在一行里面装下，其他元素缩小各自的宽度

wrap

方式2 换行不过我们可能觉得不可思议，没有挨到一起，挨到一起是纵轴的设置，不是主轴

wrap-reverse

方式3 反方向主轴一直没变左右只不过是从下边开始了小的永远在左边

四、flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要

求。

flex-flow: row nowrap;

方式1

flex-flow: row wrap; 水平换行

方式2

水平换行反转

方式3

/* 方式3 垂直包装 */

flex-flow: column wrap;

方式4

** flex-flow: column-reverse wrap** 垂直反转包装

方式5

**flex-flow: column-reverse wrap-reverse; ** 垂直反转包装反转

五、主轴对齐方式

属性名： justify-content

如果我们有很多元素的话，我们可以设置元素的排列方式，如均分，两边对齐。。。。

基本代码

markdown 复制代码

<title>05.主轴对齐方式</title>
  <style>
     .outer {
       width: 1000px;
       height: 600px;
       /* border: 1px solid black; */
       background-color: #888;
       margin: 0 auto;

       /* 开启弹性布局 */
       display: flex;

      
       /* flex-flow复合属性   水平 换行 */
       flex-flow: row wrap;
       

       /* 方式1 主轴对齐方式，从左开始 */
       justify-content: flex-start;

       /* 方式2 从右往左 千万不要把该属性通 wrap-resrver 说成一样的，看数字排列的属性 */
       /* justify-content: flex-end; */

       /* 方式3 居中对齐*/
       /* justify-content: center; */

       /* 方式4   两边对齐 */
       /* justify-content: space-between; */

       /* 方式4  主轴均匀对齐  项目与项目间空隙是边上的2倍*/
       /* justify-content: space-around; */

       /* 方式5  均匀分布 ,留的空隙都是一样的 */
       /* justify-content: space-evenly; */
      
     }
     
     .inner {
       width: 200px;
       height: 200px;
       background-color: seashell;
       border: 1px solid black;
       box-sizing: border-box;
     }

  </style>
</head>
<body>
    <div class="outer">
       <div class="inner">1</div>
       <div class="inner">2</div>
       <div class="inner">3</div>
    </div>
</body>