CSS-Box-Sizing-and-Flexbox

CSS样式请查看这里

Box Sizing

box-sizing属性允许我们在元素的总宽度和高度内包括内边距和边框。

• 假设不指定box sizing属性，那么，元素的高度和宽度是这样计算的：

  • 实际宽度=width+padding+border
  • 实际高度=height+padding+border

  当设置元素的宽度和高度时，通常来说，该元素比设置的看起来更大，因为实际高度和宽度也把边框和内边距加到了里边。

  比如说下面这两个小例子：

  未设置内边距
  padding:50px;

  
  
  
  

• 使用box-sizeing属性可以解决这个问题

box-sizing: border-box;

未设置内边距

padding:50px;

* {
  box-sizing: border-box;
}

这个代码可以将此属性应用于所有元素。

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

Flexbox

在 Flexbox 布局模块之前，可用的布局模式有以下四种：

• 块（block）
• 行内（inline）
• 表
• 定位（用于元素的明确位置）

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

如果要使用Flexbox模型，首先需要定义一个Flex容器。

父元素（容器）

通过将display属性设置为flex，此容器可伸缩。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

.a1 {
  display: flex;
}

123

123

要注意：设置此属性后将该变原来div的块级元素性质

弹性布局中必须有一个 display 属性设置为 flex 的父元素。

弹性容器的直接子元素会自动成为弹性项目。

flex容器有以下属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction属性定义容器要在哪个方向上堆叠flex项目。

column值设置垂直堆叠（自上向下）

.a1 {
  display: flex;
  flex-direction: column;
}

column-reverse值设置垂直堆叠（自下向上）

.a2 {
  display: flex;
  flex-direction: column-reverse;
}

row值设置水平堆叠项目（从左到右）

.a3 {
  display: flex;
  flex-direction: row;
}

row-reverse值设置水平堆叠项目（从右向左）

.a4 {
  display: flex;
  flex-direction: row-reverse;
}

a1:

1

2

3

a2:

1

2

3

a3

1

2

3

a4:

1

2

3

值	描述
row	默认值。作为一行，水平地显示弹性项目。
row-reverse	等同行，但方向相反。
column	作为列，垂直地显示弹性项目。
column-reverse	等同列，但方向相反。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

flex-wrap

flex-wrap属性规定是否对flex项目换行。

wrap值规定项目在必要时进行换行

nowrap 值规定将不对 flex 项目换行（默认）

wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行

wrap:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

np-wrap:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

wrap-reverse:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

flex-flow

flex-flow属性是用于同时设置flex-direction和flex-wrap属性的简写属性。

div{
    display:flex;
    flex-flow:column-reverse wrap-reverse;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

值	描述
nowrap	默认值。规定弹性项目不会换行。
wrap	规定弹性项目会在需要时换行。
wrap-reverse	规定弹性项目会在需要时换行，以反方向。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

justify-content

justify-content属性用于对齐flex项目。

center值将项目在容器中心对齐。

flex-start值将项目在容器开头对齐。（默认）

flex-end值将flex项目在容器末端对齐。

space-around值显示行之间之前之后带有空格的flex项目。

space-between 值显示行之间带有空格的 flex 项目

center:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

flex-start:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

注意：是从设置的flex-direction起始和末尾方向为准。

flex-end:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

1

2

3

4

5

6

7

8

9

10

11

12

13

14

space-around:

1

2

3

(在1的前后各设置了一个空格)

space-between:

1

2

3

<div style="display:flex;flex-direction:column-reverse;
background-color:black;color:cyan;flex-wrap:wrap-reverse;
height:400px;justify-content:space-between;">
<div style="border:1px inset tomato;padding:45px;"> 1 </div>
<div style="border:1px inset tomato;padding:45px;"> 2 </div>
<div style="border:1px inset tomato;padding:45px;"> 3 </div>
</div>

上面两个代码除了justify-content值设置不一样其他均一样，我们一起来思考一下区别在哪里？🤔🤔🤔🤔

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

align-items

align-items属性用于垂直对齐flex项目。

center值用于将项目于容器中间对齐。

flex-start值用于将项目在容器顶部对齐。

flex-end值用于将项目在容器底部对齐。

stretch值用于将项目拉伸以填充整个容器。(默认)

baseline值用于将项目基线对齐。

<div style="display:flex;flex-direction:row-reverse;
background-color:black;color:cyan;text-align:center;
flex-wrap:wrap-reverse;height:200px;align-items:center;">
<div style="border:1px inset tomato;padding:45px;">1</div>
<div style="border:1px inset tomato;padding:45px;">2</div>
<div style="border:1px inset tomato;padding:45px;">3</div>
</div>

center:

1

2

3

flex-start:

1

2

3

对于容器方向设置的开始和结束为准。

flex-end:

1

2

3

stretch:

1

2

3

baseline:

1

2

3

值	描述
stretch	默认。项目被拉伸以适合容器。
center	项目位于容器的中央。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的末端。
baseline	项目被定位到容器的基线。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

align-content

align-content属性用于对齐弹性线。

space-between值设置弹性线之间有相等的间距。

space-around值显示弹性线在其之前之间之后带有空格。

stretch值拉伸弹性线占据剩余空间。（默认）

center值在容器之间显示弹性线。

flex-start值在容器开头显示弹性线。

flex-end值在容器末尾显示弹性线。

<div style="display:flex;flex-direction:row;background-color:black;
color:cyan;flex-wrap:wrap;height:400px;"> 
<div style="border:1px inset tomato;padding:45px;">1</div>
<div style="border:1px inset tomato;padding:45px;">2</div>
<div style="border:1px inset tomato;padding:45px;">3</div>
<div style="border:1px inset tomato;padding:45px;">4</div>
<div style="border:1px inset tomato;padding:45px;"> 5 </div>
<div style="border:1px inset tomato;padding:45px;">6</div>
<div style="border:1px inset tomato;padding:45px;">7</div>
<div style="border:1px inset tomato;padding:45px;">8</div>
<div style="border:1px inset tomato;padding:45px;">9</div>
<div style="border:1px inset tomato;padding:45px;">10</div>
<div style="border:1px inset tomato;padding:45px;">11</div>
<div style="border:1px inset tomato;padding:45px;">12</div>
<div style="border:1px inset tomato;padding:45px;">13</div>
<div style="border:1px inset tomato;padding:45px;">14</div>
<div style="border:1px inset tomato;padding:45px;">15</div>
<div style="border:1px inset tomato;padding:45px;">16</div>
<div style="border:1px inset tomato;padding:45px;">17</div>
<div style="border:1px inset tomato;padding:45px;">18</div>
<div style="border:1px inset tomato;padding:45px;">19</div>
<div style="border:1px inset tomato;padding:45px;">20</div>
<div style="border:1px inset tomato;padding:45px;">21</div>
<div style="border:1px inset tomato;padding:45px;">22</div>
<div style="border:1px inset tomato;padding:45px;"> 23 </div>
</div>

space-between:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

space-around:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

stretch:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

center:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

flex-start:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

flex-end:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

值	描述
stretch	默认值。行拉伸以占据剩余空间。
center	朝着弹性容器的中央对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

完美居中

将align-items和justify-content均设置为center可以获得完美居中的效果。

<div style="display:flex;height:200px;width:200px;background-color:black;
justify-content:center;align-items:center;">
	<div style="background-color:chartreuse;height:50px;width:50px;">		</div>
</div>

子元素（项目）

flex容器的直接子元素会自动成为弹性项目。

用于弹性项目的属性有：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

order属性规定项目的顺序。

代码中首个项目不必在布局中显示为第一项。

order值必须是数字，默认值为0

1

2

3

4

<div style="display:flex;flex-direction:row;background-color:black;
 color:cyan;flex-wrap:wrap;height:200px;align-content:flex-start;">
<div style="border:1px inset tomato;padding:45px;order:3;">1</div>
 <div style="border:1px inset tomato;padding:45px;order:2;">2</div>
 <div style="border:1px inset tomato;padding:45px;order:1;">3</div>
 <div style="border:1px inset tomato;padding:45px;order:4;">4</div>
</div>

值	描述
number	默认值为 0。规定弹性项目的顺序。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

flex-grow

flex-grow属性规定某个项目对于剩余的项目将增长多少。值必须是数字，默认为0。

下例令1增长为1，2为2…

1

2

3

4

<div style="display:flex;flex-direction:row;background-color:black;
color:cyan;flex-wrap:wrap;height:200px;align-content:flex-start;">
    <div style="border:1px inset tomato;padding:45px;flex-grow:1;">
        1</div>
    <div style="border:1px inset tomato;padding:45px;flex-grow:2;">2</div>
    <div style="border:1px inset tomato;padding:45px;flex-grow:3;">3</div>
    <div style="border:1px inset tomato;padding:45px;flex-grow:4;">4</div>
</div>

flex-shrink

flex-shrink属性规定某个项目对于其他项目收缩多少。该值必须是数字，默认值为0。

1

2

3

4

5

6

..

<div style="background-color:black;
            align-items:stretch;display:flex;">
	<div style="background-color:chartreuse;color:black;
width:80px;line-height:40px;text-align:center;margin:5px;">
        1
    </div>
    <div style="background-color:chartreuse;color:black;
 width:80px;line-height:40px;text-align:center;margin:5px;">
        2
    </div>
    <div style="background-color:chartreuse;color:black;
width:80px;line-height:40px;text-align:center;margin:5px;">
        3
    </div>
    <div style="background-color:chartreuse;color:black;
width:80px;line-height:40px;text-align:center;margin:5px;">
        4
    </div>
    <div style="background-color:chartreuse;color:black;
width:80px;line-height:40px;text-align:center;flex-shrink: 5;margin:5px;">
        5
    </div>
    <div style="background-color:chartreuse;color:black;
width:80px;line-height:40px;text-align:center;margin:5px;">
        6
    </div>
</div>

_{看不出来有什么区别呀}😅😅😅

请看这里

flex-basis

flex-basis属性规定项目的初始长度。

1

2

3

4

为div3设置了flex-basis:200px;;

flex

flex属性是flex-grow、flex-shrink和flex-basis的简写属性。

1

2

3

4

为div3设置flex:0 0 200px;令其初始长度为200px，不可增长、不可收缩。

值	描述
flex-grow	数字，规定项目相对于其余弹性项目的增长量。
flex-shrink	数字，规定项目相对于其余弹性项目的收缩量。
flex-basis	项目的长度。合法值：“auto”、“inherit”，或单位为 “%”, “px”, “em” 的值，或任何其他长度单位。
auto	等同于 1 1 auto。
initial	等同于 0 1 auto。
none	等同于 0 0 auto。
inherit	从其父元素继承该属性。

align-self

align-self属性规定弹性容器内项目的对齐方式。

align-self属性将覆盖容器的align-items属性所设置的对齐方式。

1

2

3

4

<div style="display:flex;background-color:black;
            color:cyan;height:200px;align-content:flex-start;">
    <div style="border:1px inset tomato;padding:45px;">1</div>
    <div style="border:1px inset tomato;padding:45px;">2</div>
    <div style="border:1px inset tomato;padding:45px;align-self:center;">3</div>
    <div style="border:1px inset tomato;padding:45px;">4</div>
</div>

值	描述
auto	默认。元素继承其父容器的 align-items 属性，如果没有父容器，则为 “stretch”。
stretch	定位元素以适合容器。
center	元素位于容器的中央。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的末端。
baseline	元素被定位到容器的基线。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

两个示例

使用Flexbox的响应式图库

使用Flexbox的响应式图库

一个小发现

在markdowm设置的style内联样式表可以正常部署整个页面。