Flexbox布局（4）

来源：互联网发布：金口诀软件下载编辑：程序博客网时间：2024/06/05 18:19

上一篇Flexbox布局（3）

css居中问题，老生常谈。这里试着flex布局一番，看看flex居中实现起来效果如何。实现下面效果：
这里写图片描述

使用以下要点：

display: flex ：肯定要来一个flexbox嘛。
flex-direction: column ：竖直方向摆放子元素。
align-items: center ：“串糖葫芦”，居中效果
justify-content: center ：子元素之间仅仅相靠，不撑开。与Flexbox布局（3）中的content: space-between效果刚好相反。

<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"><script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><style>    .centered-prompt {        display: flex;        flex-direction: column;        align-items: center;        justify-content: center;        min-height: 300px;        padding: 10px;        font-family: Raleway,Helvetica,sans-serif;    }    .centered-prompt-item + .centered-prompt-item {        margin-top: 5px;    }    .centered-prompt-icon {        font-size: 60px;    }    .centered-prompt-item {        color: #BCD2DA;    }    .centered-prompt-botton {        padding: 5px 15px;        color: #FFF;        background-color: #4EBBE4;        border: 1px solid #16A2D7;        border-radius: 4px;    }</style><div class="centered-prompt">    <div class="centered-prompt-item centered-prompt-icon">        <div class="icon fa fa-smile-o"></div>    </div>    <div class="centered-prompt-item">        <h1>welcome to the app</h1>        thanks for signing up. let take a look around.    </div>    <div class="centered-prompt-item centered-prompt-botton">        begin tour    </div></div>

下一篇flexbox布局（5）

0 0