CSS3中flex（弹性盒子模型）

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

CSS3中flex（弹性盒子模型）

• CSS3中flex（弹性盒子模型）
  • 容器属性
    • flex-direction（更改主轴排列方向）
      • row（默认，从左向右）
        • 
      • row-reverse（倒叙排）
        • 
      • column（按列排，从上到下）
        • 
      • column-reverse（按列倒叙排）
        • 
    • flex-wrap（换行）
      • no-wrap
      • wrap
        • 
      • wrap-reverse
        • 
    • flex-flow是flex-direction和flex-wrap的复合属性
      • 
    • justify-content（定义了项目在主轴上的对齐方式 ）
      • lex-start：左对齐（默认）
      • flex-end：右对齐
      • center：居中
        • 
      • space-between：两端对齐（项目间间隔相同）
        • 
      • space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）
        • 
    • align-items（定义项目在交叉轴上如何对齐 ）
      • stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
      • flex-start ：交叉轴起点对齐
        • 
      • flex-end：交叉轴终点对齐
        • 
      • center：交叉轴中点对齐
        • 
      • baseline：以字的线对齐
        • 
    • align-content(属性定义多根轴线的对齐方式 )(取消中间空白部分)
      • stretch：轴线占满整个交叉轴（默认值）
      • flex-start：与交叉轴的起点对齐
        • 
      • flex-end：与交叉轴的终点对齐
        • 
      • center：与交叉轴的中点对齐
      • space-between：与交叉轴两端对齐，轴线间间隔相等
      • space-around：每根轴线两侧的间隔都相等
  • 项目属性
    • order（排序）
      • 3里,order:-1;
        • 
      • 例题
        • 
      • 数越大越靠后可以为负数
    • flex：
      • flex-grow（定义项目的放大比例 ）
        • 默认是0，就是如果没有占满容器整行，也不放大项目，就像上面的图片
          • 
      • flex-shrink（定义项目的缩小比例 ）
        • 默认是1，就是如果空间不足，该项目将等比缩小
      • flex-basis（就是设置定值，固定的像素）
        • 默认auto，就是项目本来的宽度
          • 
      • flex（flex是flex-grow、flex-shrink、flex-basis的复合属性 ）
        • 默认值：0 1 auto，后两个属性可选
          • 剩余空间拿一份flex:1;
    • align-self
      • align-self属性允许个别项目拥有与众不同的对齐方式 就是会覆盖align-items设置的对齐属性 默认值auto，继承弹性容器的align-items属性值 属性值除了auto外，和align-items一样
        • auto
        • stretch
        • flex-start
        • flex-end
        • center
        • baseline
        • 例题
          • 
  • 补充属性
    • .flex-box-item:nth-child(3n+1){ }
• 补充标签
  • <link/>连接 外部样式表
    • <link rel="stylesheet" href="css/bootstrap.css" />
  • <lable></lable>
    • 当你按了label中的文字，可以让文字与控件联系在一起用"for"属性将label与另一个元素绑在一起。"for"属性值应该和相关的元素"id"属性值相同
  • 设置input输入框的大小
    • <input name="" type="text" size="15" style="width:100px;height:50px;"/> 修改style里面相对应的宽和高像素就行了。size是设置输入框大小的