Flexbox 多个菜单项的左右对齐

Aligning multiple items left and right using flexbox.

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}
h1,
h2 {
    font-weight: normal;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    max-width: 30em;
}
.flex-container {
    background: #001f3f;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 1.5em;
}
.flex-container > div:nth-of-type(2) {
    margin-left: -25%;
    width: 25%;
}
.flex-container > div:nth-of-type(3) {
    text-align: right;
    margin-right: -25%;
    width: 25%;
}
.flex-container a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 1em;
    -webkit-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
}
.flex-container a:hover {
    background: #0074d9;
    text-decoration: underline;
}

HTML

Aligning multiple items left and right using flexbox.

编辑器支持Emmet

快捷键

Aligning multiple items left and right using flexbox.

原生WebGL单纯形噪音（simplex noise）算法生成的粒子特效

使用CSS3 Flexbox实现的图文瀑布流布局

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：