web-dev-qa-db-ja.com

Flexbox-同じ行で左右を揃える

状況：

Flexboxで作成しているシンプルなナビゲーションバーがあります。 1つのアイテムを左にフロートし、他のアイテムを右に固定しておきたい。

例：

<nav>
  <ul class="primary-nav">
    <li><a href="#" id="item1">ListItem1</a></li>
    <li><a href="#" id="item2">ListItem2</a></li>
    <li><a href="#" id="item3">ListItem3</a></li>
    <li><a href="#" id="item4">ListItem4</a></li>
  </ul>
</nav>

問題

通常、答えは左右に項目を左右に移動するだけですが、おそらくFlexbox Floatsを使用するのは良くありません。うまくいかない。

最初のアイテムにフレックススタートを適用してから、他のアイテムにフレックスエンドを適用しようとしましたが、うまくいきませんでした。

そのようです：

.primary-nav #item1 {
  justify-content: flex-start;
}

.primary-nav #item2 {
  justify-content: flex-end;
}

.primary-nav #item3 {
   justify-content: flex-end; 
}

.primary-nav #item4 {
    justify-content: flex-end;    
}

Flexboxスキルを持ち、この状況に対処する適切な方法を教えてくれる人に感謝します。:)

htmlcssnavbarflexbox
23
Nick Pineda

左側に要素を1つだけ、右側に他の要素をすべて表示する場合、最も簡単な解決策はjustify-content:flex-endを親要素に追加して、すべての要素を右に移動してからmargin-right:auto左側に配置したい要素に

.primary-nav {
    display:-webkit-flex;
    display:flex;
    list-style-type:none;
    padding:0;
    justify-content:flex-end;
}

.left {
    margin-right:auto;
}
<nav>
  <ul class="primary-nav">
    <li class="left"><a href="#">ListItem1</a></li>
    <li class="right"><a href="#">ListItem2</a></li>
    <li class="right"><a href="#">ListItem3</a></li>
    <li class="right"><a href="#">ListItem4</a></li>
  </ul>
</nav>
40
mmgross

マージンハックや擬似要素は必要ありません。

単にフレックスコンテナ内に分割を作成し、フレックスコンテナがスペースによって正当化されるようにします。

最初の区分内に、左側にあるアイテムを配置し、2番目の区分内に、右側にあるアイテムを配置します。

nav.menu{
    display: flex;
    justify-content: space-between;
}
nav.menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav.menu ul li{
    display: inline-block;
}
<nav class="menu">
    <ul class="menu-left">
        <li><a href="#">HOME</a></li>
        <li><a href="#">SERVICES</a></li>
    </ul>
    <ul class="menu-right">
        <li><a href="#">MEMBERS</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">PROFILE</a></li>
    </ul>
</nav>
18
leoap

疑似要素を適切な場所に挿入し、利用可能なスペースを埋めるように成長させることができます。

.primary-nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}
.right {
  order: 1;
}

.primary-nav {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.primary-nav::after {
  content: '';
  flex-grow: 1;
  order: 0;
}
.right {
  order: 1;
}
.left, .right {
  border: 1px solid;
  padding: 0 5px;
}
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="right">Right 1</li>
  <li class="right">Right 2</li>
  <li class="right">Right 3</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="left">Left 2</li>
  <li class="right">Right 1</li>
  <li class="right">Right 2</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="left">Left 2</li>
  <li class="left">Left 3</li>
  <li class="right">Right 1</li>
</ul>
<ul class="primary-nav">
  <li class="left">Left 1</li>
  <li class="right">Right 1</li>
  <li class="left">Left 2</li>
  <li class="right">Right 2</li>
  <li class="left">Left 3</li>
  <li class="right">Right 3</li>
</ul>
14
Oriol

MmgrossのソリューションのよりCSS簡潔な形式を次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.container {
    display:flex;
    list-style-type:none;
    padding:0;
}

.container > li:first-child {
    margin-right:auto;
}

td { border:1px black solid } /* for debug */
</style>
</head>
<body>
<table>
<tr><td colspan=2>
  <ul class="container">
    <li>leftitem</li>
    <li>rightitem</li>
  </ul>
<tr><td>otherotherotherother<td>otherotherotherother
</table>

降伏：

enter image description here

フィドル： https://jsfiddle.net/hbszf61x/ 無視 赤 -これは JSfiddleのバグ によるものです。コードは有効です http://i.imgur.com/IVx6tET.png

1
ChrisJJ