找回密码
当前位置：前端开发者 > CSS > 正文

前端开发 Flex布局教程实例

2018-07-22 分类：CSS 阅读(706) 评论(0)
前端开发课程自学网|mac os网页前端开发|前端组件化开发实践
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。
我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。
一、骰子的布局
骰子的一面，最多可以放置9个点。
下面，就来看看Flex如何实现，从1个点到9个点的布局（一个span元素表示一个点）
1.1一个点的布局
html 代码
<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发和网页前端</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            background: #000;
        }
        .box {
            /*一个点在左上角*/
            /*display: flex;*/
            /*一个点上部居中*/
            /*display: flex;
justify-content: center;*/
            /*一个点在右上角*/
            /*display: flex;
justify-content: flex-end;*/
            /*一个点在左中部*/
            /*display: flex;
align-items: center;*/
            /*一个点出现在正中间*/
            /*display: flex;
align-items: center;
justify-content: center;*/
            /*一个点在右中部*/
            /*display: flex;
align-items: center;
justify-content: flex-end;*/
            /*一个点在右下角*/
            /*display: flex;
align-items: flex-end;*/
            /*一个点在下中部*/
            /*display: flex;
align-items: flex-end;
justify-content: center;*/
            /*一个点出现在右下角*/
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #FFF;
            border: 5px solid #ddd;
            border-radius: 5px;
        }
        .item {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #000;
        }
    </style>
</head>
<body>
    <div class=”box”>
        <span class=”item”></span>
    </div>
</body>
</html>
1.2两个点的布局
html 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>上海张江前端开发薪资</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            background: #000;
        }
        .box {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #FFF;
            border: 5px solid #ddd;
            border-radius: 5px;
            /*上部分散对齐，两个点出现在左右两侧*/
            /*display: flex;
justify-content: space-between;*/
            /*在左侧分散对齐，两个点出现在上下两侧*/
            /*display: flex;
flex-direction: column;
justify-content: space-between;*/
            /*中间分散对齐，两个点出现在左右两侧*/
            /*display: flex;
justify-content: space-between;
align-items: center;*/
            /*下部分散对齐，两个点出现在左右两侧*/
            /*display: flex;
justify-content: space-between;
align-items: flex-end;*/
            /*在中间分散对齐，两个点出现在上下两侧*/
            /*display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;*/
            /*在右侧分散对齐，两个点出现在上下两侧*/
            /*display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;*/
        }
        .item {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #000;
        }
        .box {
            display: flex;
            justify-content: space-between;
        }
        .item:nth-child(2) {
            /*align-self: center;*/
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class=”box”>
        <span class=”item”></span>
        <span class=”item”></span>
    </div>
</body>
</html>
3.多个点的布局
html 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            background: #000;
        }
        .box {
            width: 90px;
            height: 90px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #FFF;
            border: 5px solid #ddd;
            border-radius: 5px;
        }
        .item {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #000;
            margin: 5px;
        }
        /*3个点*/
        /*.box{
display: flex;
justify-content: space-between;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}*/
        /*4个点*/
        /*.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}*/
        /*六个点*/
        /*.box{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}*/
        /*.box {
display: flex;
flex-wrap: wrap;
}
.row{
flex-basis: 100%;
display:flex;
justify-content: space-between;
}
.row:nth-child(2){
justify-content: center;
}
*/
        .box {
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <!–<div class=”box”>
<span class=”item”></span>
<span class=”item”></span>
<span class=”item”></span>
</div>–>
    <!–<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>–>
    <!–<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>–>
    <!–<div class=”box”>
<div class=”column”>
<span class=”item”></span>
<span class=”item”></span>
<span class=”item”></span>
</div>
<div class=”column”>
<span class=”item”></span>
<span class=”item”></span>
<span class=”item”></span>
</div>
</div>–>
    <!–<div class=”box”>
<div class=”row”>
<span class=”item”></span>
<span class=”item”></span>
<span class=”item”></span>
</div>
<div class=”row”>
<span class=”item”></span>
</div>
<div class=”row”>
<span class=”item”></span>
<span class=”item”></span>
</div>
</div>–>
    <div class=”box”>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
        <span class=”item”></span>
    </div>
</body>
</html>
二、网格布局
2.1 基本网格布局
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
HTML代码如下。
<div class=”Grid”>
<div class=”Grid-cell”>…</div>
<div class=”Grid-cell”>…</div>
<div class=”Grid-cell”>…</div>
</div>
css代码如下。
.Grid {
display:flex;
}
.Grid-cell {
flex:1;
}
2.2 百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。
<div class=”Grid”>
<div class=”Grid-cell u-1of4″>…</div>
<div class=”Grid-cell”>…</div>
<div class=”Grid-cell u-1of3″>…</div>
</div>
.Grid {
display:flex;
}
.Grid-cell {
flex:1;
}
.Grid-cell.u-full {
flex:00100%;
}
.Grid-cell.u-1of2 {
flex:0050%;
}
.Grid-cell.u-1of3 {
flex:0033.3333%;
}
.Grid-cell.u-1of4 {
flex:0025%;
}
三、圣杯布局
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。
<body class=”HolyGrail”>
<header>…</header>
<div class=”HolyGrail-body”>
<main class=”HolyGrail-content”>…</main>
<nav class=”HolyGrail-nav”>…</nav>
<aside class=”HolyGrail-ads”>…</aside>
</div>
<footer>…</footer>
</body>
css代码如下。
.HolyGrail {
display:flex;
min-height:100vh;
flex-direction:column;
}
header,
footer {
flex:1;
}
.HolyGrail-body {
display:flex;
flex:1;
}
.HolyGrail-content {
flex:1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex:0012em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order:-1;
}
如果是小屏幕，躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction:column;
flex:1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex:auto;
}
}
四、输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮。
HTML代码如下。
<div class=”InputAddOn”>
<span class=”InputAddOn-item”>…</span>
<input class=”InputAddOn-field”>
<button class=”InputAddOn-item”>…</button>
</div>
css代码如下。
.InputAddOn {
display: flex;
}
.InputAddOn-field {
flex:1;
}
五、悬挂式布局
有时，主栏的左侧或右侧，需要添加一个图片栏。
HTML代码如下。
<div class=”Media”>
<img class=”Media-figure” src=”” alt=””>
<p class=”Media-body”>…</p>
</div>
css代码如下。
.Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right:1em;
}
.Media-body {
flex:1;
}
六、固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
HTML代码如下。
<body class=”Site”>
<header>…</header>
<main class=”Site-content”>…</main>
<footer>…</footer>
</body>
css代码如下。
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex:1;
}
七，流式布局
每行的项目数固定，会自动分行。
css的写法。
.parent {
width: 200px;
height: 150px;
background-color: black;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.child {
box-sizing:border-box;
background-color:white;
flex:0025%;
height:50px;
border:1pxsolidred;
}
自学前端开发一般要多久|前端开发简历云盘|无经验的前端开发简历
赞(0)
前端开发者 » 前端开发 Flex布局教程实例
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论