[前端学习]CSS3部分学习笔记，第三天

伸缩布局

传统布局的局限性

• 在之前的css中对盒子布局我们使用的浮动定位等方法，固然对大部分布局已经能够胜任，但是一些特殊的布局样式却是力不从心。因此css3中新增了伸缩布局的功能，它能应对较复杂的布局结构，并且对响应式布局支持尤为明显

justify-content

• 伸缩布局时属性都是设置给多个盒子的父元素，通过父元素来操作子盒子
• display:flex应用这个属性就将父元素变为了伸缩盒子，而它内部的所有子元素盒子都自动变成了伸缩项。伸缩项不需要浮动和定位，也能在同一行显示或者同一列显示
• 下面就是伸缩布局最重要的属性：
• justify-content:flex-start||flex-end||center||space-between||space-around设置所有伸缩项再主轴方向的排列方式，属性值介绍：
  • flex-start从伸缩盒子的开始位置来进行排列布局，简单说就是对齐父盒子的左边按顺序排列
  • flex-end从伸缩盒子的结束位置来进行排列布局，也就是对齐父盒子的右边按顺序排列，注意这个和右浮动不一样，不会改变盒子的顺序，只是相当于把几个伸缩项挪到右边对齐
  • center让所有伸缩项在主轴方向居中对齐排列
  • space-between让第一个和最后一个伸缩项紧贴父盒子左右两边，将剩余空间平均分配为间距然后给中间的几个盒子
  • space-around将剩余空间平均分配，然后放到所有伸缩项的两边作为间距

flex-flow

• 要明白flex-flow怎么使用，首先得搞清楚flex-wrap和flex-direction这两个属性的作用
• flex-wrap:norwrap||wrap||wrap-reverse，属性值介绍：
  • norwrap默认值，伸缩项宽度总和大于伸缩盒子的时候不换行，自动平均收缩所有伸缩项，铺满父盒子当前行
  • wrap当伸缩项宽度总和大于伸缩盒子的时候换行，在新的一行再次按照justify-content的方式排列
  • wrap-reverse翻转换行的位置，上下行互换位置
• flex-direction:row||row-reverse||column||column-reverse，属性值介绍：
  • row默认值，设置主轴为水平方向。这里涉及到一个主轴和侧轴的概念，默认情况下主轴是水平方向轴，侧轴是垂直方向轴。即默认情况下盒子是按主轴方向从左往右排列
  • row-reverse设置盒子主轴水平方向排列并翻转顺序，从右往左排列
  • column设置主轴为垂直方向，就是将侧轴垂直方向设置为了主轴，水平方向成了侧轴。盒子就会按照垂直方向，从上往下排列
  • column-reverse设置主轴垂直方向排列并翻转顺序，从下往上排列
• 搞清楚这两个属性后，flex-flow就不难理解，它就是这两个属性的综合，它包含上面两个属性的所有属性值
• flex-flow:norwrap||wrap||wrap-reverse||row||row-reverse||column||column-reverse
  • 比如我想设置垂直方向为主轴，并且换行可以这样写：flex-flow:column wrap;属性值顺序没有限制，它也是写在父元素中
• 关于主轴和侧轴的概念一定要明白，因为justify-content属性就是根据主轴来设置排列方式的

flex

• flex属性也是由多个属性组合而成的，分别是flex-grow、flex-shrink、flex-basis
• flex-grow:number当所有伸缩项宽度总和小于父元素宽度时，将剩余空间按比例分给伸缩项子元素。用来扩展子元素宽度，注意这个属性是写在子元素中的，属性值介绍：
  • 默认值0说明子元素不占据剩余空间，一般写0和1就行了。这个数值其实是一个比例值，比例值的计算方法：当前子元素flex-grow值/所有兄弟子元素flex-grow值总和(包括了自己)
  • 什么意思呢？比如一共3个子元素，给其中一个设置flex-grow:1，其它两个默认为0。那么比例就是1/(1+0+0)=100%，该元素占据所有剩余空间
  • 再比如一共3个子元素，给其中两个设置flex-grow:1，另外一个默认为0，那么比例就是1/(1+1+0)=50%，当前设置了的元素占据剩余空间的50%
• flex-shrink:number当所有伸缩项大于伸缩盒子的的时候，将多余的宽度按比例来让子元素承担，这个属性也是写在子元素中
  • 默认值为1，说明所有子元素平均承担超出部分的空间。计算比例与前一个相同：当前子元素flex-shrink值/所有兄弟子元素flex-shrink值总和(包括了自己)
  • 但是因为默认值为1的，所以一般设置为0。比如三个子元素默认都是1，平均承担超出的值。你给当前元素设置为0，那么当前元素就不再承担比例值，由另外两个分别承担50%
• 明白上面两个属性，flex属性也就很好理解了,一般来说很少用flex把上面三个属性的值都写全，大多数情况下就写flex-grow的属性值
• flex:number如果写一个数值，那么默认就是设置子元素占据剩余空间的比例，根据比例计算公式，可以实现不论多少个项，都能自动平均填满父元素宽度
• 重点：在案例中发现了一个问题，flex设置的是剩余空间，而不是单纯设置宽度。如果是row为主轴那么剩余空间设置的就是宽，如果column为主轴那么剩余空间设置的就是高。上面的笔记都是默认主轴为水平方向

align-items

• align-items:flex-start||flex-end||center||stretch||baseline它的作用与justify-content正好相反，设置侧轴方向上的对齐方式，这个属性是设置给父元素
  • flex-start让所有伸缩项在侧轴的开始位置对齐
  • flex-end让所有伸缩项在侧轴的结束位置对齐
  • center让所有伸缩项在侧轴的中间对齐
  • stretch默认值，让所有伸缩项在侧轴方向上拉伸填满，注意如果子元素设置高度，那么此属性无效
  • baseline让所有伸缩项在侧轴方向上，根据文本基线对齐
• 如果想要给单独某个伸缩项设置侧轴对齐方式，使用align-self属性，写法和属性值都是一样的，只是写在具体子元素中