Flex layout example (1)

【Foreword】

Yesterday I summarized the basic grammar of flex layout, and today I will do a few examples to study it in depth.

Recommend a good blogger: Mr. Ruan Yifeng, the article is very detailed, and it can be quickly understood after combining with simple picture analysis.

Write down the notes after learning according to the tutorial

【List】

(1) Classic dice layout (1 o'clock and 6 o'clock)

(2) Grid layout

(3) Holy Grail layout

(4) Input box layout

【main body】

(1) Classic dice layout

Basic template schema:

<div class="box">
  <span class="item"></span>
</div>

The div element (representing a face of the die) is the flex container, and the span element (representing a point) is the flex item. If there are multiple items, add multiple span elements, and so on

① six o'clock

<style type="text/css">
     .box{
            width: 250px;
            height: 250px;
            background: rgba(0,0,0,0.5);
            border-radius: 10%;
            margin: auto;
            padding: 15px;
            display: flex;
            flex-direction:row;/*Horizontal arrangement direction*/
            flex-wrap: wrap; /* wrap */
            justify-content: space-around;/*Horizontal alignment*/
            align-content: space-around;/*Vertical alignment*/
        }
        .column{
            width: 100%;
            height: auto;
            justify-content: space-around;
            display: flex;
        }
        .item{
            display: block;
            height: 50px;
            width: 50px;
            background-color: white;
            border-radius: 100%;
        }
</style>
<div class="box">
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <div class="column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>

② a little

//css
.box{
      display: flex;
      justify-content: center;/*Horizontal alignment*/
      align-items: center;/*Vertical alignment*/
}
//HTML
<div class="box">
    <span class="item"></span>
</div>

(2) Grid layout

①Basic grid layout

The simplest grid layout is the even distribution. Evenly distribute space in the container, similar to the dice layout above, but need to set the automatic scaling of the item

<style type="text/css">
   .Grid {display: flex;}
   .Grid-cell { flex: 1;}
</style>
<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

②百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间

（3）圣杯布局（Holy Grail Layout）

指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局实例</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        .main-body{
            box-sizing: border-box;
            display: flex;
            min-height: 600px;
            flex-direction: column;/*项目排列方向垂直*/
        }
        header,footer{
            text-align: center;
            flex: auto;
            height: 10%;
        }
        header{background-color: rebeccapurple}
        footer{background-color: #5bd5a0}
        .body {
            text-align: center;
            display: flex;
            flex: 1;
            background-color: #AAAAAA;
        }
        main{flex: 1}
        nav,aside{
            /* 两个边栏的宽度设为16em */
            flex: 0 0 16em;
        }
        nav{background-color: #1daee9}
        aside{background-color: #009922}
        nav {
            /* 导航放到最左边 */
            order: -1;
        }
       //如果是小屏幕，躯干的三栏自动变为垂直叠加
        @media (max-width: 768px) {
            .body {
                flex-direction: column;
                flex: 1;
            }
            nav,aside,main{
                flex: auto;
            }
        }
    </style>
</head>
<body>
    <div class="main-body">
        <header>头部</header>
        <div class="body">
            <main>主体部分</main>
            <nav>左侧导航栏</nav>
            <aside>副栏</aside>
        </div>
        <footer>底部</footer>
    </div>
</body>
</html>

（4）输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮

//CSS代码
.InputAddOn {display: flex;}
.InputAddOn-field {flex: 1;}
//HTML代码
<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

Flex layout example (1)

Guess you like