Flexbox布局（2）

来源：互联网发布：矢量图软件哪个好编辑：程序博客网时间：2024/05/22 05:20

接上一篇下一篇Flexbox布局（1）。
在需要左右放置内容的情况下（下图布局效果），往常都是用float，这个float恶心的很，需要float: left，float: right，然后再clear: both。不仅麻烦，并且常常左右内容不能水平对齐。
这里写图片描述

这个时候，css3的flex布局的优越感油然而生。下面使用flex来实现以下图中的效果。
不多解释了，直接代码中注释了。

<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>    .site-header {        background: #56727C;        /**         * 声明flexbox，现在.site-header是一个flexbox了。默认情况下，子元素水平摆放         */        display: flex;        /**         * 子元素之间填充空间，使子元素填满这个flexbox。         */        justify-content: space-between;    }    .site-header .site-header-section {        display: flex;        /**         * 每个子元素的竖直中间位置放在flexbox的main axis。就像串糖葫芦一样。         */        align-items: center;        margin: 10px 15px;        padding: 2px 5px;        color: white;    }    .site-header .site-header-section .site-header-section-item {        margin: 0 15px;        padding: 2px 5px;        cursor: pointer;    }    .site-header-logo {        font-size: 20px;        color: white;    }    .site-header-item-selected {        color: #FFFFFF;        background-color: #415F69;        border-radius: 4px;    }</style><div class="site-header">    <div class="site-header-section">        <div class="site-header-section-item site-header-logo"><div class="fa fa-inbox"></div></div>        <div class="site-header-section-item site-header-item-selected">home</div>        <div class="site-header-section-item">about</div>        <div class="site-header-section-item">others</div>    </div>    <div class="site-header-section">        <div class="site-header-section-item">settings</div>    </div></div><script>    $('.site-header-section-item').click(function (e) {        $('.site-header-section-item').removeClass('site-header-item-selected');        $(this).addClass('site-header-item-selected');    });</script>

下一篇Flexbox布局（3）

0 0