flexible伸缩盒模型

前言

　　flexible box即为可伸缩的盒模型，让容器能让其子元素自由改变宽高或顺序，以最佳的方式填充容器。可以让子元素扩展来填满可用空间，缩小来防止溢出。flexible box由伸缩容器和伸缩项目组成。

　　兼容性：IE10+、firefox、chrome、safari

基本术语

　　下面是一张伸缩盒模型的概念图：

　　1、flex container：伸缩容器

　　2、flex item：伸缩项目

　　3、main-axis：主轴

　　4、main-start：主轴起点

　　5、main-end：主轴终点

　　6、main-size：主轴尺寸

　　7、cross-axis：侧轴

　　8、cross-start：侧轴起点

　　9、cross-end：侧轴终点

　　10、cross-size：侧轴尺寸

相关属性介绍

1、display:flex | inline-flex：定义伸缩容器

　　　取值：

　　　　1、flex：将元素定义为弹性盒模型

　　　　2、inline-flex：将元素定义为内联块级弹性盒模型

2、flex-direction：适用于伸缩容器，定义伸缩项目排列在伸缩容器上的方向

　　　取值：

　　　　1、row：默认值，当文字排版时ltr时从左向右，当文字排版时rtl时从右向左

　　　　2、row-reverse：方向与row相反

　　　　3、column：从上向下

　　　　4、column-reverse：从下往上

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       /*-webkit-flex-direction: row;*/
10       /*-webkit-flex-direction: row-reverse;*/
11       /*-webkit-flex-direction: column;*/
12       -webkit-flex-direction: column-reverse;
13
14       background: pink;
15       width: 600px;
16       margin: 50px auto;
17     }
18
19     .item {
20       height: 100px;
21       width: 98px;
22       border: 1px solid #000;
23     }
24   </style>
25 </head>
26 <body>
27   <div class="wrap">
28     <div class="item">1</div>
29     <div class="item">2</div>
30     <div class="item">3</div>
31     <div class="item">4</div>
32     <div class="item">5</div>
33   </div>
34 </body>
35 </html>

3、flex-wrap：适用于伸缩容器，定义伸缩容器是单行还是多行。

　　　取值：

　　　　1、nowrap：默认，单行

　　　　2、wrap：多行，新增相沿着侧轴方向添加

　　　　3、wrap-reverse：多行，侧轴起点与终点方向交换

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       /*-webkit-flex-wrap: nowrap;*/
11       /*-webkit-flex-wrap: wrap;*/
12       -webkit-flex-wrap: wrap-reverse;
13
14       background: pink;
15       width: 400px;
16       margin: 50px auto;
17     }
18
19     .item {
20       height: 100px;
21       width: 98px;
22       border: 1px solid #000;
23     }
24   </style>
25 </head>
26 <body>
27   <div class="wrap">
28     <div class="item">1</div>
29     <div class="item">2</div>
30     <div class="item">3</div>
31     <div class="item">4</div>
32     <div class="item">5</div>
33     <div class="item">6</div>
34     <div class="item">7</div>
35     <div class="item">8</div>
36     <div class="item">9</div>
37   </div>
38 </body>
39 </html>

4、justif-content：适用于伸缩容器，定义伸缩项目沿着主轴的对齐方式

　　　取值：

　　　　1、flex-start：默认值，伸缩项目向一行的起始位置靠齐

　　　　2、flex-end：伸缩项目向一行的结束位置靠齐

　　　　3、center：伸缩项目向一行的中间靠齐

　　　　4、space-between：第一个在开始位置，第二个在结束位置，中间的平均分配

　　　　5、space-around：两端一半空位，中间平均分配

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       -webkit-flex-wrap: nowrap;
11       /*-webkit-justify-content: flex-start;*/
12       /*-webkit-justify-content: flex-end;*/
13       /*-webkit-justify-content: center;*/
14       /*-webkit-justify-content: space-between;*/
15       -webkit-justify-content: space-around;
16
17       background: pink;
18       width: 500px;
19       margin: 50px auto;
20     }
21
22     .item {
23       height: 100px;
24       width: 98px;
25       border: 1px solid #000;
26     }
27   </style>
28 </head>
29 <body>
30   <div class="wrap">
31     <div class="item">1</div>
32     <div class="item">2</div>
33     <div class="item">3</div>
34     <div class="item">4</div>
35   </div>
36 </body>
37 </html>

5、align-items：适用于伸缩项目，定义在侧轴上的对齐方式

　　　取值：

　　　　1、flex-start：侧轴方向向起始位置靠齐

　　　　2、flex-end：侧轴方向向结束位置靠齐

　　　　3、center：侧轴方向居中靠齐

　　　　4、baseline：侧轴方向基线对齐

　　　　5、stretch：默认值，侧轴方向拉伸填充伸缩容器

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       -webkit-flex-wrap: wrap;
11       -webkit-align-items: flex-start;
12       -webkit-align-items: flex-end;
13       -webkit-align-items: center;
14       -webkit-align-items: stretch;
15       -webkit-align-items: baseline;
16
17       background: pink;
18       width: 400px;
19       height: 400px;
20       margin: 50px auto;
21     }
22
23     .item {
24       width: 98px;
25       border: 1px solid #000;
26     }
27   </style>
28 </head>
29 <body>
30   <div class="wrap">
31     <div class="item">1<br />1</div>
32     <div class="item">2</div>
33     <div class="item">3</div>
34     <div class="item">4</div>
35     <div class="item">5</div>
36     <div class="item">6</div>
37     <div class="item">7</div>
38     <div class="item">8</div>
39     <div class="item">9</div>
40   </div>
41 </body>
42 </html>

6、align-content：适用于伸缩容器，指定多行伸缩容器的对齐

　　　取值：

　　　　1、flex-start：各行向伸缩容器的起点位置堆叠。

　　　　2、flex-end：各行向伸缩容器的结束位置堆叠。

　　　　3、center：各行向伸缩容器的中间位置堆叠。

　　　　4、space-between：首行靠开始，末行靠结尾，中间平均分配间隔

　　　　5、space-around：首末一半，中间平均分配间隔

　　　　6、stretch：默认值，各行伸缩占满剩余空间

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       -webkit-flex-wrap: wrap;
11       -webkit-align-content: flex-start;
12       -webkit-align-content: flex-end;
13       -webkit-align-content: center;
14       -webkit-align-content: space-between;
15       -webkit-align-content: space-around;
16       -webkit-align-content: stretch;
17
18       background: pink;
19       width: 400px;
20       height: 400px;
21       margin: 50px auto;
22     }
23
24     .item {
25       width: 98px;
26       border: 1px solid #000;
27     }
28   </style>
29 </head>
30 <body>
31   <div class="wrap">
32     <div class="item">1<br />1</div>
33     <div class="item">2</div>
34     <div class="item">3</div>
35     <div class="item">4</div>
36     <div class="item">5</div>
37     <div class="item">6</div>
38     <div class="item">7</div>
39     <div class="item">8</div>
40     <div class="item">9</div>
41   </div>
42 </body>
43 </html>

7、order：适用于伸缩项目，控制伸缩项目在伸缩容器中出现的顺序。

　　　取值：默认0，正整数和0。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       background: pink;
11       width: 400px;
12       height: 400px;
13       margin: 50px auto;
14     }
15
16     .item {
17       width: 98px;
18       border: 1px solid #000;
19     }
20   </style>
21 </head>
22 <body>
23   <div class="wrap">
24     <div class="item" style="-webkit-order: 3">1<br />1</div>
25     <div class="item" style="-webkit-order: 4">2</div>
26     <div class="item" style="-webkit-order: 1">3</div>
27     <div class="item" style="-webkit-order: 0">4</div>
28     <div class="item">5</div>
29     <div class="item">6</div>
30     <div class="item">7</div>
31     <div class="item">8</div>
32     <div class="item">9</div>
33   </div>
34 </body>
35 </html>

8、flex-grow：适用于伸缩项目，定义伸缩项目的扩展能力，对剩余空间所占的比例分配。

　　　取值：默认0，正整数和0

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       background: pink;
11       width: 400px;
12       height: 400px;
13       margin: 50px auto;
14     }
15
16     .item {
17       width: 50px;
18       border: 1px solid #000;
19     }
20   </style>
21 </head>
22 <body>
23   <div class="wrap">
24     <div class="item" style="-webkit-flex-grow: 1">1<br />1</div>
25     <div class="item" style="-webkit-flex-grow: 2">2</div>
26     <div class="item">3</div>
27   </div>
28 </body>
29 </html>

9、flex-shrink：适用于伸缩项目，定义伸缩项目收缩的能力，伸缩项目超出伸缩容器后收缩的比例。

　　　取值：默认0，正整数和0

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>flexible</title>
 6   <style>
 7     .wrap {
 8       display: -webkit-flex;
 9       -webkit-flex-direction: row;
10       background: pink;
11       width: 400px;
12       height: 400px;
13       margin: 50px auto;
14     }
15
16     .item {
17       width: 300px;
18       border: 1px solid #000;
19     }
20   </style>
21 </head>
22 <body>
23   <div class="wrap">
24     <div class="item" style="-webkit-flex-shrink: 1">1<br />1</div>
25     <div class="item" style="-webkit-flex-shrink: 2">2</div>
26     <div class="item">3</div>
27   </div>
28 </body>
29 </html>

使用于伸缩项目的其他属性：

　　flex-basis、flex、align-self

时间： 2024-10-13 12:37:51

flexible伸缩盒模型的相关文章

深入了解 Flexbox 伸缩盒模型

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步.如果你想知道它是什么并是如何工作的,不妨仔细了解下吧! 为什么需要伸缩布局盒(Flexbox)? 作者长期以来使用表格.浮动.行内块元素和其他 CSS 属性来布局网站内容.然而,这些并不是为复杂的页面和网页应用而设计的.不管是简单的垂直居中,还是灵活的网格布局都很难靠一己

【转】深入了解 Flexbox 伸缩盒模型

Webkit Flex伸缩盒模型属性备忘

一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. 由多个伸缩项目组成其具体的布局方式. 是为了呈现复杂的应用与页面而设计出来的. display:-webkit-flex; -webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto none 在任何情况都

L6.Flexbox 伸缩盒模型

http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/ 1 Introduction CCS2.1中规定了四种布局模式: block layout, designed for laying out documents inline layout, designed for laying out text table layout, designed for laying out 2D data in a tabular format positi

CCS3 伸缩盒模型（最新）

CSS3伸缩盒对使用响应式布局的网站的开发带来了很好的实现方式.它可以在不使用浮动(float)和定位(position)的情况下实现块级(block)元素的水平排列.并且可以把父元素的宽度按照比例分配子元素,闲话不多少直接看例子. 1.要实现伸缩盒模式必须给父元素设置:display:flex (老版本display:box 需要加对应的浏览器前缀),实现伸缩盒模式的显示方式. 2.通过设置子元素的flex-grow属性来分配比例 1 <div id="parent">

Flex布局（伸缩盒布局）

Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型.由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式. 浏览器兼容性作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何.我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的. 可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-we

html5浮动、等高、弹性盒模型

1px dashed虚线 box-sizing拯救了布局 1.inherit 继承父级 2.content-box(默认)-----这个盒子的边框.内边距这2个值是不包括在width和height中,所以外扩 3.border-box---- 这个盒子的边框.内边距这2个值是包括在width和height中了浮动就是让元素脱离了文档.文档为空后,所以边框就包不住了.所以我们要清除浮动方法一:(有问题,不建议) 之前html是用clear来清除的,现在不能用这个了 <!-- 在父级里添加

CSS3伸缩盒Flexible Box

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等 3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算 4)表单布局的时候,经常是左边和右边在一行上,以往是设置

CSS3伸缩布局盒模型 - Flexbox基础知识

我们知道在CSS2中,可以使用“浮动”和“定位”来改变盒子在文档流中的显示方式.这两种方式也是目前广泛使用的布局方式,但是在实践过程中会发现有些特殊的布局没法或者很难通过这两种方式来实现.在CSS3中映入了伸缩布局盒模型的概念,这样可以使得某些难以实现的布局变得非常轻松. 使用Flexbox(Flexible Box)可以很好解决以下问题: 1,作为容器的盒子的宽度.高度等可以被其子元素改变.主要体现在改变子元素的宽高来填充可用空间或者防止溢出父元素 2,可以改变子元素的布局方向或者顺序. Fl