<!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>
