什么是弹性布局
一句话：就是用于解决一个盒子内多个子盒子的排列及其分布。（不存在float浮动塌陷问题）
display: flex;/*开启弹性布局,注：设置于父元素*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Document</title> <style> .box { width: 350px; border: 1px solid black; display: flex; /*开启弹性模式*/ } </style> </head> <body> <div class="box"> <div class="item" style="width: 100px;height: 100px;background: red;"></div> <div class="item" style="width: 100px;height: 100px;background:rebeccapurple;"></div> <div class="item" style="width: 100px;height: 100px;background:blue;"></div> </div> </body> </html>未开启弹性布局效果图 开启弹性布局效果图
float
主要为了解决多个元素共存一行。
缺点：子元素浮动后，父元素高度塌陷；当父元素宽度，大于所有的的子元素宽度之和，为了美观，需要人为计算边距。 解决办法：在父元素加 overflow: hidden;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Document</title> <style> .box { width: 350px; border: 1px solid black; } .box div { float: left; } </style> </head> <body> <div class="box"> <div class="item" style="width: 100px;height: 100px;background: red;"></div> <div class="item" style="width: 100px;height: 100px;background:rebeccapurple;"></div> <div class="item" style="width: 100px;height: 100px;background:blue;"></div> </div> </body> </html>效果图：
弹性布局属性
父元素属性
👉 justify-content属性主要用于控制子元素在主轴方向上(主轴方向默认是水平从左向右)的排列及分布方式。
假设：主轴的方向是水平的，从左向右的。
flex-start 弹性开头(相当于左对齐)，默认的
flex-end 弹性结尾(相当于右对齐)
center 居中对齐
space-between 等距分隔(左、右子元素与父元素左边、右边没有间距)
space-around 等距环绕(左、右子元素与父元素左边、右边有间距)
align-items 属性主要用于控制子元素在次轴方向上(交轴方向默认是垂直从上向下)的排列及分布方式。
👉align-items(设置单行效果)/align-content(设置多行效果)主要用在子元素高度不一致的情况下使用`
假设：次轴默认就是垂直的，方向是从向下的。
flex-start /*上对齐，默认的*、
flex-end 下对齐
center 居中对齐
baseline 首行文字对齐
stretch 上下都对齐(上下拉伸)，当没有设置子元素的高度时会拉伸
👉flex-wrap主要用于实现多行布局
nowrap 不实现换行
当不使用弹性换行时，如果子元素的宽度超出了父元素的宽度，那么子元素宽度会被自动压缩。
wrap 当子元素的总宽大于父元素时，进行换行显示。向下换行
wrap-reverse
当子元素的总宽大于父元素时，进行换行显示。向上换行
设置多行的对齐方式，只要当换行时才会生效。
子元素属性
flex 为子元素设置所要占据父元素尺寸的权重。
ouder 设置子元素排列顺序，值越小越靠前。默认0。
align-self 仅设置当前子元素，跟align-items用法一样
flex-direction修改主轴的方向，当主轴方向修改时，次轴会自己修改为与主轴交差。
值： row 默认是从左向右
row-reverse 从右向左
column 从上向下
column-reverse 从下向上
