前端（十二）

一布局css

关于布局的css目前学到的有浮动、相对定位，绝对定位、固定定位。关于布局中水平垂直居中的需求在实际开发中非常常见，下边就介绍一下关于居中那些事。

1.1让div水平居中

方式一：使用 marin:0 auto;css样式即可让div水平居中，但是需要一个条件：当前div的宽度是一个固定值。

<div style="margin: 0 auto; background: crimson;width: 100px; height: 100px ;"></div>

方式二：使用定位样式，让div水平居中。

<div style="position: absolute; left:50%; transform: translateX(-50%); background: crimson;  width: 100px; height: 100px;"></div>

1.2让div垂直居中

只有一个方式，就是通过定位去实现垂直居中。

<div style="position: absolute; top:50%; transform: translateY(-50%); background: crimson;  width: 100px; height: 100px;"></div>

1.3让div水平垂直居中

只有一个方式，就是通过定位去实现水平垂直居中。

<div style="position: absolute; top:50%; left: 50%; transform: translateY(-50%) translateY(-50%); background: crimson;  width: 100px; height: 100px;"></div>

1.4让文字水平居中

通过text-align: center;属性去实现文字水平居中

 <div style=" width: 100px; height: 100px;  border: 1px solid #ff0000;text-align: center; ">eeeeeeee</div>

1.5让文字垂直居中

单行文字，使用line-height 等于height的方式达到文字垂直居中：

  <div style=" width: 100px; height: 100px;  border: 1px solid #ff0000;line-height: 100px ">eeeeeeee</div>

<div style=" position: relative;  width: 100px; height: 100px;  border: 1px solid #ff0000; "> 
   <div style=" transform: translateY(-50%) ; position: absolute; top:50%; ">
        你好你好你好你好你好你好你好你好你好  
  </div> 
</div>

仅仅需要让文字垂直居中，然后加上一个text-align : center；属性即可让文字水平垂直居中。

二css3新布局方式

就目前所掌握的布局方式，对于块级元素的控制能力很不灵活，因为块级默认独占一行。变成行内又没法设置宽高。浮动规则死板。定位脱离文档流。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强。

flex伸缩布局

• 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。

• 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。

PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

设置伸缩布局的步骤

1. 指定一个盒子为伸缩布局： display: flex;
2. 设置 flex-direction 来改变水平还是垂直，从左到右还是从右到左，从上到下还是从下到上。

flex-direction属性讲解： 

• row 水平方向（默认值）
• reverse-row 水平反转
• column 垂直方向
• reverse-column 垂直反转

感觉有点抄袭android中的线性布局orientation属性，但是丰富了更多属性。

justify-content：设置子元素在主轴上的对齐方式。

justify-content: 属性讲解：

• flex-start 从主轴的起点对齐（默认值）
• flex-end 从主轴的终点对齐
• center 沿主轴方向居中对齐
• space-around 在父盒子里平分
• space-between 两端对齐 平分

有点抄袭android中线性布局gravity属性，但是丰富了一些属性。

align-items：设置子元素在侧轴上的对齐方式。

align-items:属性讲解：

• flex-start 从侧轴开始的方向对齐
• flex-end 从侧轴结束的方向对齐
• baseline 基线 默认同flex-start
• center 中间对齐
• stretch 拉伸

伸缩布局权重

伸缩布局的子布局可以使用flex 来表示权重，类似android线性布局的layout_weight。

通过伸缩布局的学习，我们又增加让布局水平或者垂直居中的方式：

display: flex; align-items: center ;justify-content: center;