Flexbox布局（1）

来源：互联网发布：java五角星代码编辑：程序博客网时间：2024/05/17 02:23

使用css3中的flex，可以实现很棒的布局。一些简单的页面和需求，可以考虑使用flex布局，基本上都能满足需求。

只需要将元素添加一个display: flexcss规则，我们就获得了一个flexbox。就是这么简单。默认情况下，flexbox将其子元素沿着一条水平的“main axis”轴线布局。

这里写图片描述

本篇先玩一下基本的使用：水平排列子元素。
先做一个Stepper input组建，效果如图

这里写图片描述

没有必要使用display: inline-block，也没有必要使用float: left，使用display: flex就可以使图中的button、input、button三个元素由左到右依次排开。

<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><style>    .stepper-input {        display: flex;    }    .stepper-button {        background: #4EBBE4;        color: white;        cursor: pointer;        font-size: 12px;        border: 1px solid #16A2D7;        padding: 5px 15px;    }    .stepper-button-left {        border-radius: 4px 0 0 4px;    }    .stepper-button-right {        border-radius: 0 4px 4px 0;    }    .stepper-input-input {        border-left: 0;        border-right: 0;        border-color: #16A2D7;        text-align: center;        width: 60px;    }</style><div class="stepper-input">    <button class="stepper-button stepper-button-left">-</button>    <input type="text" value="22" class="stepper-input-input">    <button class="stepper-button stepper-button-right">+</button></div><script>    $('.stepper-button-left').click(function (e) {        $('.stepper-input-input').get(0).value = parseInt($('.stepper-input-input').get(0).value) - 1;    });    $('.stepper-button-right').click(function (e) {        $('.stepper-input-input').get(0).value = parseInt($('.stepper-input-input').get(0).value) + 1;    });</script>

下面再来一个Tabs组建的例子，效果图：

这里写图片描述

<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><style>    .tabs {        display: flex;        border-bottom: 1px solid #D7DBDD;    }    .tab {        cursor: pointer;        color: #16A2D7;        padding: 5px 30px;        border-bottom: 1px solid transparent;        font-size: 12px;    }    .tab.tab-selected {        border-bottom-color: #4EBBE4;    }</style><div class="tabs">    <div class="tab tab-selected">tab1</div>    <div class="tab">tab2</div>    <div class="tab">tab3</div>    <div class="tab">tab4</div></div><script>    $('.tab').click(function (e) {        $('.tab').removeClass('tab-selected');        $(this).addClass('tab-selected');    })</script>

下一篇Flexbox布局（2）。

0 0