javaEE 初阶 — CSS 中的弹性布局

女爷i 2023-10-04 23:37 21阅读 0赞

## 弹性布局 ##

布局就是控制某个指定元素放到指定位置上，**弹性布局** 是用来实现页面布局的。  
  
实现页面布局有以下几种方式：

1、基于表格的布局方式。  
  
2、基于浮动的布局方式，主要是解决 “水平方向排列” 问题。  
  
3、弹性布局，也是解决 “水平方向排列” 问题。  
  
4、网格布局，这是二维的布局，相当于是更加高级的的 “表格布局”。

这次只介绍 **弹性布局**。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我真帅</title>
    
        <style>
            div {
          
                width: 100%;
                height: 150px;
                background-color: red;
            }
    
            div > span {
          
                background-color: green;
                width: 100px;
            }
        </style>
    
    </head>
    <body>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </body>
    </html>

![656f04565d904416907f92a02c99f2d0.png_pic_center][]

1、**开启弹性布局**  
  
给要水平排列的元素的父元素设置 **flex**。  
此时弹性容器里面的元素，则不再是 “块级” “行内元素”，而是成为了 “弹性元素”，  
是遵守弹性布局的，此时可以设置尺寸和边距的。

display: flex;

![4612a1b83e3e4e9ba2b35de9ce891931.png_pic_center][]  
  
设置好 **display: flex;** 后，就形成了以上的效果，可以看到它的宽度和高度都相同了。

2、**设置这些元素的水平方向的排列方式**

以下表示的是靠左边排列。

justify-content: flex-start;

以上表示的是靠右边排列。

justify-content: flex-end;

![593c837edf9f4306998b9cba5dd57e7d.png_pic_center][]

以下表示的是居中排列。

justify-content: center;

![3a543759dc4c487d9fc40a6e80d7bf15.png_pic_center][]

以下是一种间隔的排列方式，并且两端会有边距

justify-content: space-around;

![2fe6c7a315bf4481b4fa7eb6c77bfb83.png_pic_center][]

以下表示的是一种间隔的排列方式，并且两端不会有边距

justify-content: space-between;

![516e96a71dfa4e388f5dd6c5b64f8628.png_pic_center][]

3、**设置元素垂直方向的排列方式**

如果想要以下页面中的绿色框框向下移动，就需要使用 **align-items: flex-end;**  
end 表示的就是向下排列。  
  
![a6a4597e56214085ba93ec652d38baaf.png_pic_center][]

使用后就会变为以下页面。  
  
![2adcae4d47724b6a82e1d4d3160cb674.png_pic_center][]  
  
也可以使用 **center** 来实现居中布局。

[656f04565d904416907f92a02c99f2d0.png_pic_center]: https://img-blog.csdnimg.cn/656f04565d904416907f92a02c99f2d0.png#pic_center
[4612a1b83e3e4e9ba2b35de9ce891931.png_pic_center]: https://img-blog.csdnimg.cn/4612a1b83e3e4e9ba2b35de9ce891931.png#pic_center
[593c837edf9f4306998b9cba5dd57e7d.png_pic_center]: https://img-blog.csdnimg.cn/593c837edf9f4306998b9cba5dd57e7d.png#pic_center
[3a543759dc4c487d9fc40a6e80d7bf15.png_pic_center]: https://img-blog.csdnimg.cn/3a543759dc4c487d9fc40a6e80d7bf15.png#pic_center
[2fe6c7a315bf4481b4fa7eb6c77bfb83.png_pic_center]: https://img-blog.csdnimg.cn/2fe6c7a315bf4481b4fa7eb6c77bfb83.png#pic_center
[516e96a71dfa4e388f5dd6c5b64f8628.png_pic_center]: https://img-blog.csdnimg.cn/516e96a71dfa4e388f5dd6c5b64f8628.png#pic_center
[a6a4597e56214085ba93ec652d38baaf.png_pic_center]: https://img-blog.csdnimg.cn/a6a4597e56214085ba93ec652d38baaf.png#pic_center
[2adcae4d47724b6a82e1d4d3160cb674.png_pic_center]: https://img-blog.csdnimg.cn/2adcae4d47724b6a82e1d4d3160cb674.png#pic_center