flex与媒体查询

1. flex弹性盒模型
2. 媒体查询

flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。作用于直接子元素"。

<!-- 任何一个容器都能设置为弹性-->
.box{  display: flex;}

设为 Flex 布局以后，子元素的float clear和vertical-align属性将失效。
容器存在两根轴：主轴和侧轴

属性

1. flex-direction 属性决定主轴的方向

.box {  
flex-direction: row
}

row（默认值）：主轴为水平方向，起点在左端 由左到右。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿 由上到下。
column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content:设置主轴内容的分布

justify-content: flex-start;

flex-start:向主轴开始位置靠拢
center:向主轴中间位置靠拢
flex-end:向主轴结束位置靠拢
space-around:平均分布,两边的间距是中间的一半
space-between平均分布,两端对齐 两端没有间距
space-evenly平均分布,两边的边距跟中间一样

3. align-items设置侧轴的内容分布。

 align-items: center

stretch:拉伸(默认)如果设置了高度 此拉伸无效
flex-start:向侧轴开始位置靠拢
center:向侧轴中间位置靠拢
flex-end:向侧轴结束位置靠拢

4. flex-wrap 换行
   父容器固定宽不够时子元素会被压缩

 flex-wrap: wrap;

nowarp:(默认)不换行
warp:换行

5.align-content 设置侧轴的多行分布

    align-content: center;

flex-start多行内容向侧轴的开始端靠拢
flex-end多行内容向侧轴的结束端靠拢
center多行内容居中
space-around:平均分布,两边的间距是中间的一半
space-between平均分布,两端对齐 两端没有间距
space-evenly平均分布,两边的边距跟中间一样

作用在子元素上的属性

1. order 定义元素的排列顺序 按照数值从小到大排序

  <div class="parent">
      <div class="child c1">1</div>
      <div class="child c2">2</div>
      <div class="child c3">3</div>
      <div class="child c4">4</div>
    </div>

  .parent {
        width: 900px;
        height: 600px;
        border: 1px solid black;
        display: flex;
      }
      .child {
        width: 200px;
        height: 200px;
      }
      .c1 {
        background: pink;
        order: 4;
      }
      .c2 {
        background: plum;
        order: 3;
      }
      .c3 {
        background: powderblue;
        order: 1;
      }
      .c4 {
        background: purple;
        order: 2;
      }

2. align-self 单独设置子元素侧轴排序

.parent {
        width: 900px;
        height: 600px;
        border: 1px solid black;
        display: flex;
      }
      .child {
        width: 200px;
        height: 200px;
      }
      .c1 {
        background: pink;
      }
      .c2 {
        background: plum;
        align-self: center;
      }
      .c3 {
        background: powderblue;
      }
      .c4 {
        background: purple;
      }

3. flex flex

<div class="left">
      <h1>侧边栏</h1>
    </div>
    <div class="main">
      <h1>主要内容</h1>
    </div>
    <div class="ad">
      <h1>广告</h1>
    </div>

  body {
      display: flex;
    }
    /* 
    flex  flex 
    flex: 1 占据一份
    */
    .left {
      background: peru;
      flex: 1; 
    }
    .main {
      background: powderblue;
      flex: 2;
    }
    .ad {
      background: purple;
      width: 200px;
    }

媒体查询

  /* 使用媒体查询必须加上meta viewport */
  /* 媒体查询  查询屏幕的大小设置不同的样式*/
  /* screen 媒体类型*/
 /* max-width:600  小于600px */
      @media only screen and (max-width: 600px) {
        .d1 {
          width: 100%;
          background: red;
        }
      }
         /* 设置大于1200px */
      @media only screen and (min-width: 1200px) {
        .d1 {
          width: 33%;
          background: yellow;
        }
      }
      /* 设定600px-1200px的设定 */
      @media only screen and (min-width: 600px) and (max-width: 1200px) {
        .d1 {
          width: 50%;
          background: purple;
        }
      }