zoukankan      html  css  js  c++  java
  • CSS3 Flex 基础

    今天用flex 写了一个管理系统的界面,很简单的布局,分享如下

    ### Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的floatclearvertical-align属性将失效。 

    ###任何一个容器都可以指定为Flex布局。

    ex:

      

      <div id="box">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
         <div class="inner">6</div>
    </div>
    #box{
            display: flex;
            flex-direction: row;
      /*一. flex-direction 决定主轴的对齐方向,分别有四个属性:
            1.row(默认值):主轴为水平方向,起点在左端。  
            2.row-reverse:主轴为水平方向,起点在右端。
            3.column:主轴为垂直方向,起点在上沿。
            4.column-reverse:主轴为垂直方向,起点在下沿。
      */
            width: 500px;
            border: 1px solid red;
            flex-wrap: wrap;   /*
                                 二.flex-wrap   子元素换行的方式  默认nowrap
                                 wrap:换行,正常的折行 
                                 wrap-reverse  第二行在第一行上 
      */  
            flex-flow:row no-wrap;
           /*             
               三. flex-flow:是flex-direction 和flex-wrap的简写形式,默认是 row  nowrap
                   flex-flow:flex-direction|flex-wrap 
      */
                
            justify-content:center;
                                      /*
                          四.   justify-content  子元素子元素在主轴对齐方式  默认flex-start  左对齐
      
                           flex-end:右对齐
                           center: 居中
                           space-between:两端对齐,项目之间的间隔都相等。
                           space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
                           flex-start和flex-end,center这三个都比较简单,主要区分开下面的space-between和space-around;
                           space-between:两端对齐,       
      */
            align-items:center;
            /*
            
      */
    }
    
    
    .inner{
            width: 100px;
            height: 100px;
            background: #8a4182;
            margin: 10px;
            color:#fff;
            text-align:center;
            line-height:6;
    
    }
  • 相关阅读:
    iOS-触摸事件、手势识别、摇晃事件、耳机线控
    iOS-App生命周期
    Foundation框架—时间处理对象NSDate
    Kali linux渗透测试的艺术 思维导图
    数据结构_二叉树遍历
    数据结构_数值转换
    <转载>Mac下,使用sshpass让iterm2支持多ssh登录信息保存
    <转载>iTerm2使用技巧
    Maven打包编译找不到com.sun.crypto.provider.SunJCE类
    MySQL自动设置create_time和update_time
  • 原文地址:https://www.cnblogs.com/getdaydayup/p/6412689.html
Copyright © 2011-2022 走看看