[ css 弹性盒子模型 align-content 属性 ] 弹性盒子模型flex布局中align-content属性讲解及实例演示的区别

说明：

　　本属性适用于：多行的弹性盒模型容器

　　当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果

实例:

 

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>align-content_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
    font: bold 20px/1.5 georgia, simsun, sans-serif;
}

.box {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-direction: wrap;
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    list-style: none;
    background-color: #eee;
}

.box li {
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background: #aaa;
    text-align: center;
}

#box {
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

#box2 {
    -webkit-align-content: flex-end;
    align-content: flex-end;
}

#box3 {
    -webkit-align-content: center;
    align-content: center;
}

#box4 {
    -webkit-align-content: space-between;
    align-content: space-between;
}

#box5 {
    -webkit-align-content: space-around;
    align-content: space-around;
}

#box6 {
    -webkit-align-content: strecth;
    align-content: strecth;
}
</style>
</head>
<body>
    <h1>align-content示例：</h1>
    <h2>align-content:flex-start</h2>
    <ul id="box" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <h2>align-content:flex-end</h2>
    <ul id="box2" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <h2>align-content:center</h2>
    <ul id="box3" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <h2>align-content:space-between</h2>
    <ul id="box4" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <h2>align-content:space-around</h2>
    <ul id="box5" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <h2>align-content:strecth</h2>
    <ul id="box6" class="box">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
</body>
</html>

 

 

 

 

posted @ 2016-07-07 21:49  窗棂  Views(257)  Comments(0)  Edit  收藏  举报