css笔记

弹性盒模型 1.CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 2.弹性盒模型为父级元素添加display:flex 或者display：inline-flex 其子元素则可按照弹性盒模型的规则进行布局，所有子元素会并排成一行并且按照比例平分(父级宽度/子元素总宽对应元素设置宽度)父级的宽度，都转化成行内块元素。 3.重要区别： 盒模型：子元素没有设置宽度继承父级宽度100%，子元素没有设置高度由内容撑开，默认各子元素上下排列 弹性盒模型：子元素没有设置宽度由内容撑开，子元素没有设置高度继承父级高度100%，默认各子元素按主轴从左到右横向排列 display：flex不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的属性 display：inline-flex 父级是变成行内块元素，它的子元素也是行内块元素，并且自动换行 4.主轴和交叉轴（控制子元素的布局方向*），子元素总宽度大于>父级宽度，默认不换行，按比例缩放各个子元素的宽度

*{ margin: 0; padding: 0;} #wrap{display: flex;width: 500px;height: 300px;border: 1px solid red;margin: 50px auto;} /* d1实际宽 = 100/(100+200+300)*500=83.33 */ #wrap .d1{width: 100px;background-color: #99cc99;} /* d2实际宽 = 200/(100+200+300)*500=166.67 */ #wrap .d2{width: 200px;background-color: #f60;} /* d3实际宽 = 300/(100+200+300)*500=250 */ #wrap .d3{width: 300px;background-color: #1da6ba} 5.父容器的属性 flex-direction属性决定主轴方向，默认为row即水平方向，起点在左，按从左到右横向排列，子项目按照主轴的方向从起点开始排列；   右到左横向排列：flex-direction：row-reverse    上到下纵向排列：flex-direction：column   下到上纵向排列：flex-direction：column-reverse

6.flex-wrap属性决定子元素主轴摆放不下的时候，项目换不换行，默认none不换行、交叉轴是根据主轴变化的。

  换行，第一排在最前面：flex-wrap：wrap 

  换行，最后一排在最前面：flex-wrap：wrap-reverse5

  连续的空白符会被合并。但文本内的换行无效：white-space：nowrap。

🎪子元素条件：子元素的总宽必须大于父级宽度