CSS3 弹性布局弹性框的margin属性实例详解

CSS3: Flexbox margin property 如果剩余空间被分配到auto margins，该维度上的对齐属性将没有效果，因为margins已占用全部可用空间。更多内容请阅读在线教程弹性布局对齐部分： http://techbrood.com/Guide/h5b2a?p=css-flex-layout-alignment

CSS3,弹性布局,margin

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3565
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.flexboxContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    min-height: 30rem;
    background: #a7a9aa;
}
.flexboxContainer.flex-direction-column {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}
.flex-align-items-flex-start {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.flexboxItem {
    width: 10rem;
    background-color: #b94a48;
    color: #fff;
    border: 1px dashed #333;
    padding: 1rem;
}
.m-auto {
    margin: auto;
}
.ml-auto {
    margin-left: auto;
}
.mt-auto {
    margin-top: auto;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
    padding: 2rem;
    max-width: 130rem;
}
.explain {
    background: #efefef;
    padding: 2rem;
}
.copy {
    color: #b94a48;
    font-weight: bold;
    font-size: 1.8rem;
}
.self {
    color: #428bca;
}
.separator {
    background-color: #f0ad4e;
    padding: 1.5rem 1rem;
    margin: 2rem 0;
}
.smallSeparator {
    background-color: #2980b9;
    padding: 0.5rem 1rem;
    margin: 2rem 0;
}

HTML

<div class="copy">
    <p>Specification texts are taken from the W3C specification
        <a href="https://www.w3.org/TR/css3-flexbox/#align-content">W3C CSS Flexible Box Layout Module</a>
        <br><span class="self">Own comments and notes in blue color.</span>
    </p>
</div>

<div class="explain">
    <h1>Flexbox: margin</h1> Auto margins on flex items have an effect very similar to auto margins in block flow:
    <ul>
        <li>During calculations of flex bases and flexible lengths, auto margins are treated as ‘0’.</li>
        <li>Prior to alignment via ‘justify-content’ and ‘align-self’, any positive free space is distributed to auto margins in that dimension.</li>
        <li>Overflowing elements ignore their auto margins and overflow in the end/foot direction.</li>
    </ul>
    <p>
        Note that, if free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.
    </p>

</div>

<h2>Demos</h2>
<h3 class="separator">
  margin: auto;
</h3>
<p class="self">
    // horizontal and vertical centering
</p>
<div class="flexboxContainer ">
    <div class="flexboxItem m-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus temporibus?</div>
</div>

<h3 class="separator">
  margin-left: auto at second item
</h3>
<p class="self">
    // a possibility to group the flex-items
</p>
<div class="flexboxContainer ">
    <div class="flexboxItem">1. Lorem ipsum dolor sit amet,</div>
    <div class="flexboxItem ml-auto">2. Lorem ipsum dolor sit amet, </div>
    <div class="flexboxItem">3. Lorem ipsum dolor sit amet, </div>
</div>

<h3 class="separator">
  margin-left: auto at second and fourth item
</h3>
<p class="self">
    // here: create three groups
</p>
<div class="flexboxContainer ">
    <div class="flexboxItem">Lorem ipsum dolor sit amet,</div>
    <div class="flexboxItem ml-auto">Lorem ipsum dolor sit amet, </div>
    <div class="flexboxItem">Lorem ipsum dolor sit amet,</div>
    <div class="flexboxItem ml-auto">Lorem ipsum dolor sit amet, </div>
    <div class="flexboxItem">Lorem ipsum dolor sit amet, </div>
</div>

<h3 class="separator">
  margin-top: auto at last item
</h3>
<p class="self">
    // here: create two groups | flex-direction is column
</p>
<div class="flexboxContainer flex-direction-column">
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem mt-auto">Lorem ipsum dolor</div>
</div>

<h3 class="separator">
  margin-top: auto at last item with align-items:flex-start
</h3>
<p class="self">
    // here: create two groups | flex-direction is column
    <br> // same result as above - the align-items property has no effect because margin-top: auto has stolen the free space
</p>
<div class="flexboxContainer flex-direction-column flex-align-items-flex-start">
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem mt-auto">Lorem ipsum dolor</div>
</div>

<h3 class="separator">
  No margin-top: auto at last item with align-items:flex-start
</h3>
<p class="self">
    // align-items property works
</p>
<div class="flexboxContainer flex-direction-column flex-align-items-flex-start">
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem">Lorem ipsum dolor</div>
    <div class="flexboxItem">Lorem ipsum dolor</div>
</div>

CSS3: Flexbox margin property 如果剩余空间被分配到auto margins，该维度上的对齐属性将没有效果，因为margins已占用全部可用空间。更多内容请阅读在线教程弹性布局对齐部分： http://techbrood.com/Guide/h5b2a?p=css-flex-layout-alignment

CSS3,弹性布局,margin

编辑器支持Emmet

快捷键

CSS3: Flexbox margin property 如果剩余空间被分配到auto margins，该维度上的对齐属性将没有效果，因为margins已占用全部可用空间。 更多内容请阅读在线教程弹性布局对齐部分： http://techbrood.com/Guide/h5b2a?p=css-flex-layout-alignment

CSS3,弹性布局,margin

6个使用CSS3 transform-origin属性实现的方形翻转动画

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

CSS3: Flexbox margin property 如果剩余空间被分配到auto margins，该维度上的对齐属性将没有效果，因为margins已占用全部可用空间。更多内容请阅读在线教程弹性布局对齐部分： http://techbrood.com/Guide/h5b2a?p=css-flex-layout-alignment