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

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

一、伸缩盒模型简介

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

传统布局是指：基于传统盒状模型，主要靠： display 属性 + position 属性 + float
属性。
flex 布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

二、伸缩容器/伸缩项目

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

1. 伸缩容器

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

给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容
器。
display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩
容器。
一个元素可以同时是：伸缩容器、伸缩项目。

2. 伸缩项目

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

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项
目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

效果

在这里插入图片描述

代码

<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

基本代码

.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

基本代码

   .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

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

基本代码

<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>