我在弹出框中对齐两个元素时遇到问题:我想要发生的是让帮助div到右边,然后就是XXdiv。我是新的flex容器通常浮动一个元素紧接着另一个将给出所需的影响。有谁知道我可以实现这一点吗?
< html> < head> < style> body { margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; } #menuStrip { position:relative; border-style:solid; border-width:1px; height:36px; padding:0; margin:0; background-color:black; } #menuContainer { position:relative; background-color:gray; border-style:solid; border-width:1px; padding:0; width:96%; height:98%; margin:0 auto; display:flex; } #hh { position:relative; display:flex; align-self:center; font-size:14px; width:80px; border-style:solid; border-width:1px; height:50%; margin-left:auto; } #pp { position:relative; display:flex; height:70%; width:36px; align-self:center; justify-content:center; margin-left:auto; background-color:white; border-style:solid; border-width:1px; padding:0; } < / style> < / head> < body> < div id =menuStrip> < div id =menuContainer> < div id =hh>帮助< / div> < div id =pp> XX< / div> < / div> < / body> < / html>解决方案
JUSTIFY CONTENT
您正在查找 justify-content 中使用的属性值 flex-end 。同时删除 margin-left:auto;
code,因为不需要。body {margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}#menuStrip {position:relative; border-style:solid; border-width:1px; height:36px; padding:0; margin:0; background-color:black;}#menuContainer {position:relative;背景颜色:灰色border-style:solid; border-width:1px; padding:0;宽度:96%;身高:98% margin:0 auto;显示:flex; justify-content:flex-end;}#hh {position:relative;显示:flex; align-self:center; font-size:14px; width:80px; border-style:solid; border-width:1px; height:50%;}#pp {position:relative;显示:flex;身高:70% width:36px; align-self:center; justify-content:center; background-color:white; border-style:solid; border-width:1px; padding:0;}
< div id =menuStrip > < div id =menuContainer> < div id =hh>帮助< / div> < div id =pp> XX< / div> < / div>
[/ div>
ORDER要在注释中更改排序,请使用属性 order 。这是很直接。 flex-items的顺序默认值为 0 。您可以使用负值或正值,例如 -1 , -2 , 1
您可以在第一次或第二次设置此属性。
使用正值在第一个项目中声明它:
/ strong>body {margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}#menuStrip {position:relative; border-style:solid; border-width:1px; height:36px; padding:0; margin:0; background-color:black;}#menuContainer {position:relative;背景颜色:灰色border-style:solid; border-width:1px; padding:0;宽度:96%;身高:98% margin:0 auto;显示:flex; justify-content:flex-end;}#hh {position:relative;显示:flex; align-self:center; font-size:14px; width:80px; border-style:solid; border-width:1px;身高:50% order:1;}#pp {position:relative;显示:flex;身高:70% width:36px; align-self:center; justify-content:center; background-color:white; border-style:solid; border-width:1px; padding:0;}
< div id =menuStrip > < div id =menuContainer> < div id =hh>帮助< / div> < div id =pp> XX< / div> < / div>
一个使用负值:
body {margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}#menuStrip {position:relative; border-style:solid; border-width:1px; height:36px; padding:0; margin:0; background-color:black;}#menuContainer {position:relative;背景颜色:灰色border-style:solid; border-width:1px; padding:0;宽度:96%;身高:98% margin:0 auto;显示:flex; justify-content:flex-end;}#hh {position:relative;显示:flex; align-self:center; font-size:14px; width:80px; border-style:solid; border-width:1px; height:50%;}#pp {position:relative;显示:flex;身高:70% width:36px; align-self:center; justify-content:center; background-color:white; border-style:solid; border-width:1px; padding:0; order:-1;}
< div id = menuStrip> < div id =menuContainer> < div id =hh>帮助< / div> < div id =pp> XX< / div> < / div>
简单的订单更改交互:
注意:点击锚元素将改变每个奇数项目的顺序到-1。body {margin:0;} a {font-size:2em; position:absolute; top:30%;左:50%; transform:translate(-50%,-30%); background-color:white;}。flex-container {counter-reset:flex-items;高度:100vh;背景颜色:peachpuff;显示:flex; justify-content:space-around; / *默认值* /}。flex-item {counter-increment:flex-items; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em;}。flex-container:target .flex-item:nth-child(odd){order:-1;} < a href =#flex-container>更改订单< / a>< section id =flex-containerclass = flex-container> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
进一步说明:
justify-content 属性接受5个不同的值:
- flex-start是默认值。
- flex-end
- 中心
- 空格
- b $ b
body {margin:0;}。flex-container {counter-reset:flex-items;高度:100vh;背景颜色:peachpuff;显示:flex; justify-content:flex-start; / *默认值* /}。flex-item {counter-increment:flex-items; flex:0 0 30%; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em;}
< section class = flex-container> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
flex-end
body {margin:0;}。flex-container {counter-reset:flex-items;高度:100vh;背景颜色:peachpuff;显示:flex; justify-content:flex-end;}。flex-item {counter-increment:flex-items; flex:0 0 30%; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em;}
< section class = flex-container> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
中心
< section class = flex-container> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
空格
body {margin:0;}。flex-container {counter-reset:flex-items;高度:100vh;背景颜色:peachpuff;显示:flex; justify-content:space-between;}。flex-item {counter-increment:flex-items; flex:0 0 30%; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em;}
< section class = 柔性容器> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
空格
body {margin:0;}。flex-container {counter-reset:flex-items;高度:100vh;背景颜色:peachpuff;显示:flex; justify-content:space-around;}。flex-item {counter-increment:flex-items; flex:0 0 30%; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em;}
< section class = flex-container> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
摘要:
* { sizing:border-box;} body {margin:0;}。flex-container {counter-reset:flex-items; background-color:peachpuff;显示:flex; height:calc(20vh - .5em); justify-content:flex-start; margin-bottom:.5em; flex-container:nth-child(2){justify-content:flex-end;} flex-container:nth-child(3){justify-content:center; n-child(4){justify-content:space-around;}。flex-container:nth-child(5){justify-content:space-between;}。显示:flex; content:attr(data-justify-content); justify-content:center; align-items:center;高度:100%;宽度:100%; font-size:3em;}。flex-item {counter-increment:flex-items; flex:0 0 20%; background-color:gold;}。flex-item:nth-child(even){background-color:dodgerblue;}。显示:flex; justify-content:center; align-items:center;高度:100%; font-size:3em; color:rgba(0,0,0,.3);}
< section class =flex-containerdata-justify-content =flex-start> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>< section class =flex-containerdata-justify-content =flex-end> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>< section class =flex-containerdata-justify-content =center> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>< section class =flex-containerdata-justify-content =space-around> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>< section class =flex-containerdata-justify-content =space-between> < div class =flex-item>< / div> < div class =flex-item>< / div>< / section>
$ b 更多信息:
您可以在这些资源中找到更多信息:
Codrops
CSS技巧
Flexbox小工具
Stack Overflow Michael_B的Flexbox帖子
游乐场:
Flexbox Froggy
I'm having trouble aligning two elements in a flex box: What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this?
<html> <head> <style> body { margin:0; padding:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #menuStrip { position:relative; border-style: solid; border-width: 1px; height:36px; padding:0; margin:0; background-color:black; } #menuContainer { position:relative; background-color:grey; border-style: solid; border-width: 1px; padding:0; width:96%; height:98%; margin: 0 auto; display: flex; } #hh { position:relative; display:flex; align-self: center; font-size:14px; width:80px; border-style: solid; border-width: 1px; height:50%; margin-left:auto; } #pp { position:relative; display:flex; height:70%; width:36px; align-self: center; justify-content: center; margin-left: auto; background-color:white; border-style: solid; border-width: 1px; padding:0; } </style> </head> <body> <div id="menuStrip"> <div id="menuContainer"> <div id="hh">Help</div> <div id="pp"> XX</div> </div> </body> </html>解决方案
JUSTIFY CONTENT
You are looking for the property value flex-end used in justify-content. Also remove the margin-left: auto; as it is not needed.
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #menuStrip { position: relative; border-style: solid; border-width: 1px; height: 36px; padding: 0; margin: 0; background-color: black; } #menuContainer { position: relative; background-color: grey; border-style: solid; border-width: 1px; padding: 0; width: 96%; height: 98%; margin: 0 auto; display: flex; justify-content: flex-end; } #hh { position: relative; display: flex; align-self: center; font-size: 14px; width: 80px; border-style: solid; border-width: 1px; height: 50%; } #pp { position: relative; display: flex; height: 70%; width: 36px; align-self: center; justify-content: center; background-color: white; border-style: solid; border-width: 1px; padding: 0; }<div id="menuStrip"> <div id="menuContainer"> <div id="hh">Help</div> <div id="pp">XX</div> </div>
ORDER
To change the ordering like you ask in the comments, you will use the property order. It's pretty straight forward. The order default value of flex-items is 0. You can either use negative or positive values, such as -1, -2, 1, 2 etc.
You can either set this property in your first or second item, with different values depending which you prefer to change, they will both get the same result.
Declaring it in your first item using a positive value:
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #menuStrip { position: relative; border-style: solid; border-width: 1px; height: 36px; padding: 0; margin: 0; background-color: black; } #menuContainer { position: relative; background-color: grey; border-style: solid; border-width: 1px; padding: 0; width: 96%; height: 98%; margin: 0 auto; display: flex; justify-content: flex-end; } #hh { position: relative; display: flex; align-self: center; font-size: 14px; width: 80px; border-style: solid; border-width: 1px; height: 50%; order: 1; } #pp { position: relative; display: flex; height: 70%; width: 36px; align-self: center; justify-content: center; background-color: white; border-style: solid; border-width: 1px; padding: 0; }<div id="menuStrip"> <div id="menuContainer"> <div id="hh">Help</div> <div id="pp">XX</div> </div>
Declaring it in the second one using a negative value:
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #menuStrip { position: relative; border-style: solid; border-width: 1px; height: 36px; padding: 0; margin: 0; background-color: black; } #menuContainer { position: relative; background-color: grey; border-style: solid; border-width: 1px; padding: 0; width: 96%; height: 98%; margin: 0 auto; display: flex; justify-content: flex-end; } #hh { position: relative; display: flex; align-self: center; font-size: 14px; width: 80px; border-style: solid; border-width: 1px; height: 50%; } #pp { position: relative; display: flex; height: 70%; width: 36px; align-self: center; justify-content: center; background-color: white; border-style: solid; border-width: 1px; padding: 0; order: -1; }<div id="menuStrip"> <div id="menuContainer"> <div id="hh">Help</div> <div id="pp">XX</div> </div>
Simple order change interaction:
Note: Clicking the anchor element will change every odd flex item's order to -1.
body { margin: 0; } a { font-size: 2em; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -30%); background-color: white; } .flex-container { counter-reset: flex-items; height: 100vh; background-color: peachpuff; display: flex; justify-content: space-around; /* Default Value */ } .flex-item { counter-increment: flex-items; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; } .flex-container:target .flex-item:nth-child(odd) { order: -1; }<a href="#flex-container">Change Order</a> <section id="flex-container" class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </section>
FURTHER EXPLANATION:
justify-content property accepts 5 different values:
- flex-start, which is the default.
- flex-end
- center
- space-between
- space-around
<section class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
flex-end body{ margin: 0; } .flex-container { counter-reset: flex-items; height: 100vh; background-color: peachpuff; display: flex; justify-content: flex-end; } .flex-item { counter-increment: flex-items; flex: 0 0 30%; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; }
<section class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
center body{ margin: 0; } .flex-container { counter-reset: flex-items; height: 100vh; background-color: peachpuff; display: flex; justify-content: center; } .flex-item { counter-increment: flex-items; flex: 0 0 30%; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; }
<section class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
space-between body{ margin: 0; } .flex-container { counter-reset: flex-items; height: 100vh; background-color: peachpuff; display: flex; justify-content: space-between; } .flex-item { counter-increment: flex-items; flex: 0 0 30%; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; }
<section class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
space-around body{ margin: 0; } .flex-container { counter-reset: flex-items; height: 100vh; background-color: peachpuff; display: flex; justify-content: space-around; } .flex-item { counter-increment: flex-items; flex: 0 0 30%; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; }
<section class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
SUMMARY:
* { box-sizing: border-box; } body { margin: 0; } .flex-container { counter-reset: flex-items; background-color: peachpuff; display: flex; height: calc(20vh - .5em); justify-content: flex-start; margin-bottom: .5em; position: relative; } .flex-container:nth-child(2) { justify-content: flex-end; } .flex-container:nth-child(3) { justify-content: center; } .flex-container:nth-child(4) { justify-content: space-around; } .flex-container:nth-child(5) { justify-content: space-between; } .flex-container::after { position: absolute; display: flex; content: attr(data-justify-content); justify-content: center; align-items: center; height: 100%; width: 100%; font-size: 3em; } .flex-item { counter-increment: flex-items; flex: 0 0 20%; background-color: gold; } .flex-item:nth-child(even) { background-color: dodgerblue; } .flex-item::after { content: counter(flex-items); display: flex; justify-content: center; align-items: center; height: 100%; font-size: 3em; color: rgba(0, 0, 0, .3); }<section class="flex-container" data-justify-content="flex-start"> <div class="flex-item"></div> <div class="flex-item"></div> </section> <section class="flex-container" data-justify-content="flex-end"> <div class="flex-item"></div> <div class="flex-item"></div> </section> <section class="flex-container" data-justify-content="center"> <div class="flex-item"></div> <div class="flex-item"></div> </section> <section class="flex-container" data-justify-content="space-around"> <div class="flex-item"></div> <div class="flex-item"></div> </section> <section class="flex-container" data-justify-content="space-between"> <div class="flex-item"></div> <div class="flex-item"></div> </section>
MORE INFO:
You can find more info in these resources:
Codrops
CSS Tricks
Flexbox Cheatsheet
Stack Overflow Michael_B's Flexbox Post
Playground:
Flexbox Froggy
更多推荐
右对齐两个flex容器
发布评论