一级做a免费观看视频网站可以免费打开网站的软件
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>
flex-start
主轴对齐方式，从左开始,默认方式
- justify-content: flex-start;
flex-end
方式2 从右往左 千万不要把该属性通 wrap-resrver 说成一样的，看数字排列的属性
- justify-content: flex-end;
center
居中对齐
- justify-content: center;
space-between
两边对齐，不留空隙，中间其他元素空隙均分剩余的空间
space-around
主轴均匀对齐 项目与项目间空隙是边上的2倍
- ** justify-content: space-around;**
space-evenly
均匀分布 ,留的空隙都是一样的，这是新出来的特性，比较新
- justify-content: space-evenly
