web-dev-qa-db-ja.com

Flexbox：両側にスペースアラウンド要素がある中央の要素

flexboxを使用して、さまざまな幅の7つの<li>要素で構成されるメニューを設定しています。中央（ソース順で4番目）<li>が欲しいです。要素は、一種のアンカーとして常に水平方向に中央に配置されます。中央に配置された<li>の左側のスペースは1〜3番目の<li>要素で、右側のスペースは5〜7番目の要素です。

enter image description here

親フレックスコンテナでspace-around、space-betweenを試し、中央に配置しようとしているalign-self: center要素で<li>を試しましたが、今のところうまくいきません。 flexboxに精通している人からの助けをいただければ幸いです。

jsfiddle

cssflexbox
18
Marcatectura

nav構造を変更し、3つのコンテナleft、center、および右。 [〜＃〜]デモ[〜＃〜]

[〜＃〜] html [〜＃〜]

leftとrightはいくつかのリンクを保持し、centerはリンクです。

<nav>
<span>
    <a href="#">aaa </a>
    <a href="#">aa </a>
    <a href="#">a </a>
    </span>
    <a href="#"> center </a>
    <span>
      <a href="#">bbbb </a>
      <a href="#">bbbbb </a>
      <a href="#">bbbbbb </a>
    </span>
</nav>

[〜＃〜] css [〜＃〜]

navはdisplay:flexとjustify-content:space-betweenを取るので、leftとrightも取ります。

nav, nav span {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;/* so they do not overlap each other if space too short */
}

rightとleftのエッジに中央に向かってギャップを生成するには、疑似要素を追加するだけです。 （または空の要素）。

span:first-of-type:after,
span:last-of-type:before{
    content:'';
    display:inline-block;/* enough , no width needed , it will still generate a space between */
}

leftおよびrightはflex値higher1よりも、centerが拡張しすぎないようにします。

nav > span {
    flex:2; /* 2 is minimum but plenty enough here  */
}

リンクボックスを描画しましょう：

a {
    padding:0 0.25em;
    border:solid;
}

[〜＃〜]デモ[〜＃〜]

20
G-Cyrillus

これを行う方法は、アイテムを3つの異なるul要素に分割し、flexプロパティを使用して3つの列の大きさを設定することだと思います。

外側の列には3つの要素があるため、flex:3を取得します。中央の列には要素が1つしかないため、flex:1を取得します。そうすれば、サイズを変更すると、flexboxは大きい列に3つのフレックスユニットを使用し、中央の列に1つのフレックスユニットを使用します。いずれかで異なる数のアイテムを使用する必要がある場合列の場合は、flex単位を変更して、その中にあるアイテムの数を反映します。

作業フィドル： jsfiddle

1
paulcpederson