<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;/*开启弹性盒模型*/
width: 800px;
height: 500px;
margin: 50px auto;
box-shadow: 0 0 30px 0 green inset;
}
.box1{
width: 120px;
height: 100px;
box-shadow: 0 0 30px 0 blue inset;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">5</div>
<div class="box1">6</div>
<div class="box1">7</div>
<div class="box1">8</div>
</div>
<!--
display:flex; display:inline-flex定义弹性盒模型类型
flex 容器会开启块级弹性盒模型
inline-flex 容器会开启行内弹性盒模型
在flex布局模式下,弹性子元素的float,clear和vertical-align属性将失效
在弹性盒模型中
所有元素都会变成inline-block
支持width/height/margin
display:flex;
弹性盒模型=弹性容器+弹性子元素
弹性盒模型的特点
弹性子元素默认沿主轴(类似于x轴的水平线左为flex-start)从左到右排列
当弹性子元素宽度之和大于弹性容器宽度,会按比例分配弹性容器的宽度
交叉轴是顺时针90度之后的垂直线
flex-direction:设置弹性盒模型中主轴的方向
row(默认) 水平从左到右
row-reverse 水平从右到左
column 竖直从上到下
column-reverse 竖直从下到上
flex-wrap 设置弹性子元素超出弹性容器时是否换行
弹性子元素默认只能是显示一排的
nowrap(默认) 不换行
wrap 换行 并且第一行在上边
wrap-reverse 换行 并且第一行在下边
justify-content: 设置弹性子元素的主轴对齐方式
flex-start(默认) 弹性子元素对齐主轴起点
flex-end 弹性子元素对齐主轴重点
center 弹性子元素对齐主轴中点
space-around 弹性子元素两端对齐并且两端与弹性容器有间隙
space-between 弹性子元素两端对齐并且两端与弹性容器无间隙
stretch(默认) 如果弹性子元素未设置高度,将占满整个弹性容器的高度
align-items: 设置弹性子元素的交叉轴对齐方式
flex-start 弹性子元素对齐交叉轴起点
flex-eng 弹性子元素对齐交叉轴终点
center 弹性子元素对齐交叉轴中点
baseline 弹性子元素的基线相互对齐
stretch(默认) 如果弹性子元素未设置高度,将占满整个弹性容器的高度
align-content 设置整体弹性子元素的交叉轴对齐方式
flex-start 整体弹性子元素对齐交叉轴起点
flex-end 整体弹性子元素对齐交叉轴终点
center 整体弹性子元素对齐交叉轴中点
space-around 弹性子元素两端对齐并且两端与弹性容器有间隙
space-between 弹性子元素两端对齐并且两端与弹性容器无间隙
stretch(默认) 如果弹性子元素未设置高度,将占满整个弹性容器的高度
align-items和align-content区别
align-content 在交叉轴方向存在多行弹性子元素的情况 并且中间没有间距
align-content 是把多行弹性子元素做为一个整体对齐
align-items 把每一行都当做一个整体对齐
给元素的值
align-self 控制单个弹性子元素在交叉轴的对齐方式
flex-start 弹性单个子元素对齐交叉轴起点
flex-eng 弹性单个子元素对齐交叉轴终点
center 弹性单个子元素对齐交叉轴中点
baseline 弹性单个子元素的基线相互对齐
stretch(默认) 如果弹性单个子元素未设置高度,将占满整个弹性容器的高度
order 控制子元素在主轴方向的排列顺序
数值越小 就排在越前 默认order为0 可以是其他值可以为负
flex-grow 在主轴方向有剩余空间时,设置弹性子元素的放大比例(就是占满)
所有弹性子元素的flex-grow之和=主轴方向的剩余空间
默认是0 即默认不放大
flex-shrink 在主轴方向元素宽度大于容器宽度默认占满,这时候可以使用收缩
收缩到和容器宽度一样
flex-shrink:0; 不收缩
默认是1
在设置弹性子元素宽度时 flex-basis比width的优先级要高
-->
</body>
</html>