盒模型

前言】2019.9.9

【内容】盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式

在这里插入图片描述
在这里插入图片描述布局属性：
容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content
元素/项目属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self

概念：
flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域

flex不单是一个属性，还包含了一套新的属性集
属性集包括设置容器和项目两部分

容器属性
①弹性盒模型display:flex;
②元素的排列方向flex-direction:row（默认值） | row-reverse | column |column-reverse
③元素是否换行flex-wrap:nowrap（默认值） | wrap | wrap-reverse
④、项目元素在主轴上的对齐方式justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly
⑤元素在交叉轴的对齐方式align-items:stretch（默认值） | center | flex-end | baseline | flex-start
⑥多行元素在交叉轴的对齐方式align-content:stretch（默认值） | flex-start | center |flex-end | space-between | space-around | space-evenly

项目元素属性
①多余空间时元素放大比例flex-grow：0（默认值） |
②空间不足时元素缩小比例flex-shrink:1（默认值） |
③元素在主轴上占据空间flex-basis:auto（默认值） |
④flex 是grow、shrink 、basis的简写
⑤元素的排列顺序order:0（默认值） |
⑥单独对某个元素设置交叉轴对齐方式align-self:auto（默认值） | flex-start | flex-end |center | baseline| stretch

①row（默认值）：主轴横向，项目沿主轴排列，从左到右排列
在这里插入图片描述②row-reverse：row的反方向，从右到左排列
在这里插入图片描述③column：主轴纵向，项目沿主轴排列，从上到下排列
在这里插入图片描述④column-reverse：column的反方向，从下到上排列
在这里插入图片描述屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米