web(弹性盒子、媒体查询)

web(11.16-11.17)

一、弹性盒子

1.flex-direction
描述：制定子元素在父元素中添加的位置
语法：在父元素中添加 display:flex; flex-direction:排列方式；

排列方式的值	描述
row	子元素在父元素中横向从左到右排列（默认方式）
row-reverse	子元素在父元素中横向从右向左排列
column	子元素在父元素中纵向从上到下排列
column-reverse	子元素在父元素中纵向从下到上排列

实例：

 .box{
            width:600px;
            height:600px;
            margin:0 auto;
            border:solid 1px red;
            display: flex;
           /* flex-direction: row;*/                /*也可写为：`direction: ltr;`  */
           /* flex-direction:row-reverse ;*/       /*也可写为：`direction: rtl;`  */
            /*flex-direction: column;*/
            flex-direction: column-reverse;
}
.box>div{
            width:100px;
            height:100px;
            border:solid 1px blue;
}

2.justify-content
描述：把弹性项沿着弹性容器的主轴线对齐
语法：在父元素中添加 display:flex; flex-direction:排列方式；justify-content:值；

justify-content的值	描述
flex-start	紧挨行头开始填充
flex-end	紧挨行尾开始填充
center	紧挨着居中填充
space-between	平均分布在一行，靠边两个元素紧挨行头行尾
space-round	平均分布在一行，两边都留一半的空隙

3.align-items
描述：子元素垂直对齐方式(父元素中添加)
语法：

   align-items:flex-start/flex-end/center/baseline/stretch；
   /*分别为：紧挨起始边界/紧挨结束边界/居中/紧挨基线/没有高度的情况下尽可能接近行的高度*/

4.flex-wrap
语法：父元素中添加 flex-wrap:值；

值	描述
nowrap	弹性容器为单行,有溢出时子元素会自动缩小尺寸
wrap	弹性容器为多行，有溢出的部分会被放置到新一行
wrap-reverse	溢出时，反转wrap的排列

5.align-content:设置行的对齐方式
语法：父元素中添加 align-content:值；
注：
1.align-content值类似justify-content的值；
2.align-content 属性用于修改 flex-wrap 属性的行为，在 flex-wrap:wrap; 实现作用。

6.order
描述：用来定义排列顺序，可实现 让默认情况下排在后边的元素排在前面。
语法：子元素添加order:数字；/*数字越小，越排在前面*/
实例：

.box>.box2{
            order:-1;    /*默认情况下box2排第二位，该语句实现box2排在第一位*/
  }
<div class="box">
    <div>1</div>
    <div class="box2">2</div>
    <div>3</div>
</div>

7.align-self
描述：子元素纵向对齐（子元素添加）
语法：

align-self:auto/flex-start/flex-end/center/baseline/stretch；
有父元素按align-item值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走

实例：

 .box>div{
            width:150px;
            height:100px;
            border:solid 1px blue;
}
.box>.box2{
           align-self: center;
 }
.box>.box1{
            align-self:flex-end;
 }
 .box>.box3{
            align-self: flex-start;
 }

<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

8.flex属性
描述：为弹性盒子的子元素分配空间
实例：

 .box>.box2{
            flex:2;
  }
  .box>.box1{
            flex:3
  }
 .box>.box3{
            flex:1;
 }
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

二、媒体查询

针对不同媒体类型可以定制不同的样式规则：

以pc端（1200px及以上）、ipad端（700px-1199px），手机端（0-699px）为例

一种：链接写样式的.css文件：

 <link rel="stylesheet" href="pc.css"  media="screen and (min-width:1200px)" />
 <link rel="stylesheet" href="ipad.css"  media="screen and (min-width:700px) and (max-width:1199px)" />
 <link rel="stylesheet" href="mobile.css"  media="screen and (max-width:699px)" />

二种：在html文件中直接写样式

        /*没有设置到的背景为白色*/
        @media screen and (min-width:1200px){                      /*pc*/
            body{
                background: red;          
            }
        }
        @media screen and (min-width:700px) and (max-width:1199px){     /*ipad*/
            body{ 
                background: yellowgreen;
            }
        }
        @media screen and (max-width:699px){               /*手机*/
            body{
                background: blue;
            }
        }