css学习11

1.img标签是流动元素，放在div中会自动的横向排列。如果我们想纵向排列可以使用浮动，并且自身清除浮动来实现换行显示。
注意不要设置流动元素的padding,这样设置只能在上下两个方向上有作用，但是在左右方向没有作用。要设置浮动元素的padding值。

div img {
  width: 150px;
  height: 100px;
  float: left;
  clear: left;  //清除自身前面的浮动，让自己能够换行显示。
  margin-right: 10px;
}

<div id="contain"> 
 <img src="images/bg6.jpg"> 
 <img src="images/bg7.jpg">
  <img src="images/bg2.jpg">
  <img src="images/bg3.jpg">
</div>

2.控制浏览器页面的显示的列数。这样浏览器会通过界面的宽度除以列宽100px，然后显示出来。并且列显示的高度基本相同。

body {
  column-width:100px;
  /*column-rule: red 3px dashed;*/
  column-rule-color: red;  //设置列边框的颜色
  column-rule-width: 10px;
  column-rule-style: dashed;
}

设置跨列显示。

column-span:none|all；

3.弹性盒的使用

display:flex|inline-flex

使用弹性盒能够允许容器有能力让子项目改变宽度、高度、顺序等。
并且如果容器的大小小于内部的子项目的大小的时候，会自动的缩放子项适应容器,这是因为flex-wrap的默认值就是nowrap。
在弹性盒中，使用columns属性，float，clear,vertical-align属性没有效果。

通过flex-direction来控制弹性盒的方向，但是在方向确定后，就可以通过justify-content来控制主轴方向的对齐方式。

flex-direction:row  column  row-reverse  column-reverse。

flex-wrap：nowrap（默认值） wrap(可多行显示)  wrap-reverse（反转显示）  是控制弹性盒中单行还是多行显示。

justify-content:主轴对齐方式，可以对主轴的多余的空间进行分配。
主要有：flex-start  flex-end center  space-between space-around

align-items：侧轴对齐方式
flex-start flex-end center  stretch(在侧轴方向上拉伸)  baseline(以子项中文字的基线对齐)

align-content:仅仅是作用弹性盒中多行的情况。效果和justify-content的类似。使用过程中更多的是针对侧轴方向。并且功能和justify-content重合。