zoukankan      html  css  js  c++  java

  • Flex布局（一）flex-direction

    采用Flex布局的元素，被称为Flex容器(flex container)，简称"容器"。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称"项目"

    Flex-direction调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse

    代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.    <meta charset="UTF-8">
    5.    <title>CSS3伸缩布局</title>
    6.    <style>
    7.       body {
    8.          margin: 0;
    9.          padding: 0;
    10.          font-family: '微软雅黑';
    11.          background-color: #F7F7F7;
    12.       }
    13.  
    14.       ul {
    15.          margin: 0;
    16.          padding: 0;
    17.          list-style: none;
    18.       }
    19.  
    20.       .wrapper {
    21.          width: 1024px;
    22.          margin: 0 auto;
    23.       }
    24.  
    25.       .wrapper > section {
    26.          min-height: 300px;
    27.          margin-bottom: 30px;
    28.          box-shadow: 1px 1px 4px #DDD;
    29.          background-color: #FFF;
    30.       }
    31.  
    32.       .wrapper > header {
    33.          text-align: center;
    34.          line-height: 1;
    35.          padding: 20px;
    36.          margin-bottom: 10px;
    37.          font-size: 30px;
    38.       }
    39.  
    40.       .wrapper section > header {
    41.          line-height: 1;
    42.          padding: 10px;
    43.          font-size: 22px;
    44.          color: #333;
    45.          background-color: #EEE;
    46.       }
    47.  
    48.       .wrapper .wrap-box {
    49.          padding: 20px;
    50.       }
    51.  
    52.       .wrapper .brief {
    53.          min-height: auto;
    54.       }
    55.  
    56.       .wrapper .flex-img {
    57.          width: 100%;
    58.       }
    59.  
    60.       /*全局设置*/
    61.       section ul {
    62.          display: flex;
    63.       }
    64.  
    65.       section li {
    66.          width: 200px;
    67.          height: 200px;
    68.          text-align: center;
    69.          line-height: 200px;
    70.          margin: 10px;
    71.          background-color: pink;
    72.       }
    73.  
    74.       /*垂直方向*/
    75.       section:nth-child(2) ul {
    76.          display: flex;
    77.       }
    78.  
    79.       .column ul {
    80.          flex-direction: column;
    81.       }
    82.  
    83.       .row-reverse ul {
    84.          flex-direction: row-reverse;
    85.       }
    86.  
    87.       .column-reverse ul {
    88.          flex-direction: column-reverse;
    89.       }
    90.  
    91.       /*1、指定一个盒子为伸缩盒子 display: flex*/
    92.  
    93.       /*2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction*/
    94.  
    95.       /*3、明确方向*/
    96.  
    97.       /*4、它可互换主侧轴，也可改变方向*/
    98.  
    99.    </style>
    100. </head>
    101. <body>
    102.    <div class="wrapper">
    103.       <header>CSS3-伸缩布局详解</header>
    104.       <!-- 简介 -->
    105.       <section class="brief">
    106.          <header>flex-direction</header>
    107.          <div class="wrap-box">
    108.             <p>调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse</p>
    109.          </div>
    110.       </section>
    111.       <!-- 分隔线 -->
    112.       <section>
    113.          <header>flex-direction</header>
    114.          <div class="wrap-box">
    115.             <p>调整主轴方向（默认为水平方向）</p>
    116.             <ul>
    117.                <li>1</li>
    118.                <li>2</li>
    119.                <li>3</li>
    120.             </ul>
    121.          </div>
    122.       </section>
    123.       <section class="column">
    124.          <header>column</header>
    125.          <div class="wrap-box">
    126.             <p>调整主轴方向（默认为水平方向）</p>
    127.             <ul>
    128.                <li>1</li>
    129.                <li>2</li>
    130.                <li>3</li>
    131.             </ul>
    132.          </div>
    133.       </section>
    134.       <section class="row-reverse">
    135.          <header>row-reverse</header>
    136.          <div class="wrap-box">
    137.             <p>调整主轴方向（默认为水平方向）</p>
    138.             <ul>
    139.                <li>1</li>
    140.                <li>2</li>
    141.                <li>3</li>
    142.             </ul>
    143.          </div>
    144.       </section>
    145.       <section class="column-reverse">
    146.          <header>column-reverse</header>
    147.          <div class="wrap-box">
    148.             <p>调整主轴方向（默认为水平方向）</p>
    149.             <ul>
    150.                <li>1</li>
    151.                <li>2</li>
    152.                <li>3</li>
    153.             </ul>
    154.          </div>
    155.       </section>
    156.    </div>
    157. </body>
    158. </html>
  • 相关阅读:
    元数据管理
    sqoop 安装
    postgres 索引
    postgres 表和库等信息大小统计
    Perl基础语法
    Perl 认识简介
    Oracle层次查询start with connect by
    jquery.cookie.js 的使用指南
    JavaScript中cookie使用
    CSS实现垂直居中的4种思路
  • 原文地址：https://www.cnblogs.com/wangyawei/p/9103573.html
Copyright © 2011-2022 走看看