码迷,mamicode.com
首页 > 其他好文 > 详细

5.7

时间:2018-05-07 19:39:57      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:body   children   查询   ems   弹性盒   lex   宽度   最大   otto   

弹性盒子
定义弹性盒子 display:flex
定义子元素排列方式 flex-diection
定义子元素换行方式 flxe-wrap
定义子元素对齐方式
横向对齐 justify-content
纵向对齐 align-items

 

媒体查询    @media screen and (max-width:最大宽度)and (min-width:最小宽度)
line-height与vertical-align
line-height 主要作为调节文本的垂直对齐方式,通过设置行高的大小
vertical-align 主要作为调节行内元素(span/img)的垂直对齐方式 top bottom middle text-top text-bottom

!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #parent{
    width:800px;
    height: 400px;
    border:1px solid black;
    /*定义父元素为弹性盒子*/
    display:flex;
    /*规定子元素的排列方式*/
    flex-direction: row-reverse;
    /*规定换行方式*/
    flex-wrap: nowrap;
    /*子元素在父元素的横向对齐方式*/
    justify-content: space-between;
    /*子元素在父元素的纵向对齐方式*/
    align-items:stretch ;
    }
    .children{
     width :170px;
     height: 180px;
     border: 1px solid red;
     float:left ;
     flex: 1;
     align-self: flex-start;
    }
    .children1{border: 1px solid red;
    flex:3;
    order: 0;}
  </style>
 </head>
 <body>
  <div id="parent">
  <div class="children">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
  <div class="children">6</div>
  <div class="children1">7</div>
  <div class="children">8</div>
  
  </div>
  
  
  
  
 </body>
</html>

5.7

标签:body   children   查询   ems   弹性盒   lex   宽度   最大   otto   

原文地址:https://www.cnblogs.com/sunhao1987/p/9004054.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!