web-dev-qa-db-ja.com

中央揃えおよび下揃えのフレックスアイテム

次のプロパティを持つフレックスコンテナ（青い正方形）があります。

_display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
_

したがって、その子（水色の四角）は、以下に示すように配置されます。ただし、通常のフローから別の子（緑の四角）を追加し、親に対して相対的に配置します。あなたは以下を参照してくださいと私は_bottom: 20px;_と_margin: auto;_のような理想的な書き込みに何かをしたい、それを配置します。

enter image description here

私は_z-index_を試してみましたが、役に立ちませんでした。これにどのようにアプローチすればよいですか？別の親要素の作成に頼るべきですか？

htmlcsscss3flexboxcss-grid
25
Willege

以下は、このレイアウトを達成するための5つのオプションは以下のとおりです。

  1. CSSポジショニング
  2. 目に見えないDOM要素とフレキシボックス
  3. 目に見えない擬似要素を持つFlexbox
  4. flex: 1を含むFlexbox
  5. CSSグリッドレイアウト

方法＃1：CSSポジショニングプロパティ

position: relativeをflexコンテナに適用します。

position: absoluteを緑のflexアイテムに適用します。

これで、緑色の四角形がフレックスコンテナ内に絶対に配置されました。

より具体的には、緑色の四角はドキュメントフローから削除されますが、 最近位置の祖先 の境界内に留まります。

CSSオフセットプロパティtop、bottom、leftおよびrightを使用して、緑色の正方形を移動します。

flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}
flex-container > flex-item:first-child {
  display: flex;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}
flex-container > flex-item:last-child {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%); /* fine tune horizontal centering */
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}
<flex-container>
    <flex-item><!-- also flex container -->
            <flex-item></flex-item>
            <flex-item></flex-item>
            <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

1つの警告：一部のブラウザは完全に正常な流れから絶対位置決めさフレックス項目を削除しなくてもよいです。これにより、非標準の予期しない方法でアライメントが変更されます。詳細：絶対配置フレックス項目がのFirefox＆IE11 に正常な流れから除去されません

方法＃2：Flexの自動マージンと非表示のFlexアイテム（DOM要素）

auto margins と新しい不可視のフレックスアイテムの組み合わせにより、レイアウトを実現できます。

新しいフレックスアイテムは下部のアイテムと同じで、反対側の端（上部）に配置されます。

より具体的には、フレックスアライメントは空き領域の分布に基づいているため、新しいアイテムは、3つの青いボックスを垂直方向に中央に保つために必要なカウンターバランスです。新しいアイテムは、既存の緑のアイテムと同じ高さにする必要があります。そうしないと、青いボックスが正確に中央に配置されません。

新しいアイテムは、visibility: hiddenでビューから削除されます。

要するに：

  • 緑色のボックスの複製を作成します。
  • リストの先頭にそれを置きます。
  • Flex autoマージンを使用して、青いボックスを中央に保ち、両方の緑のボックスが両端から等しいバランスを作成します。
  • visibility: hiddenを複製した緑色のボックスに適用します。
flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container > flex-item:first-child {
    margin-top: auto;
    visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
    margin-top: auto;
    display: flex;
}
flex-container > flex-item:last-child {
    margin-top: auto;
    margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
    border: 4px solid chartreuse;
    height: 50px;
    width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
    border: 4px solid aqua;
    height: 50px;
    width: 50px;
    margin: 0 5px;
}
<flex-container>
    <flex-item></flex-item>
    <flex-item><!-- also flex container -->
            <flex-item></flex-item>
            <flex-item></flex-item>
            <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

方法＃3：Flexの自動マージンと不可視のFlexアイテム（擬似要素）

このメソッドは＃2と似ていますが、意味的にきれいであり、緑色のボックスの高さがわかっている必要があります。

  • 既存の緑のボックスと同じ高さの擬似要素を作成します。
  • ::beforeでコンテナの先頭に配置します。
  • Flex autoマージンを使用して、青色のボックスを中央に保ち、緑色の擬似要素とDOM要素が両端から均等なバランスを作成します。
flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid blue;
    height: 300px;
    width: 300px;
}
flex-container::before {
  content: "";
  margin-top: auto;
  height: calc(50px + 8px);  /* height + borders */
  visibility: hidden;
}
flex-container > flex-item:first-child {
  margin-top: auto;
  display: flex;
}
flex-container > flex-item:last-child {
  margin-top: auto;
  margin-bottom: auto;
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}
flex-container > flex-item:first-child > flex-item {
  border: 4px solid aqua;
  height: 50px;
  width: 50px;
  margin: 0 5px;
}
<flex-container>
    <flex-item><!-- also flex container -->
        <flex-item></flex-item>
            <flex-item></flex-item>
            <flex-item></flex-item>
    </flex-item>
    <flex-item></flex-item>
</flex-container>

方法＃4：flex: 1を上部および下部のアイテムに追加する

上記の方法＃2または＃3から始めて、均等なバランスを維持するために上下のアイテムの高さが等しくなることを心配する代わりに、それぞれにflex: 1を与えるだけです。これにより、両者に使用可能なスペースが消費され、中央のアイテムが中央に配置されます。

次に、display: flexを一番下のアイテムに追加して、コンテンツを揃えることができます。

方法＃5：CSSグリッドレイアウト

これが最もクリーンで効率的な方法かもしれません。絶対配置、偽の要素、またはその他のハッカーの必要はありません。

3行のグリッドを作成するだけです。次に、2行目と3行目のアイテムを中央揃えにします。最初の行は空のままにできます。

grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  border: 4px solid blue;
  height: 300px;
  width: 300px;
}

grid-item:nth-child(2) {
  display: flex;
}

grid-item:nth-child(2)>flex-item {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  border: 4px solid aqua;
}

grid-item:nth-child(3) {
  border: 4px solid chartreuse;
  height: 50px;
  width: 50px;
}
<grid-container>
  <grid-item></grid-item>
  <grid-item><!-- also flex container -->
    <flex-item></flex-item>
    <flex-item></flex-item>
    <flex-item></flex-item>
  </grid-item>
  <grid-item></grid-item>
</grid-container>
45
Michael_B

コンテナにposition: relativeを、緑色の正方形にposition:absolute;を付けます

body {
  margin: 0;  
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  width: 192px;
  height: 192px;
  border: 4px solid Indigo;
  position: relative;
  background: lavender;
}

.blue {
  margin: 10px;
  width: 30px;
  height: 30px;
  outline: 4px solid skyblue;
  background: honeydew;
}

#green {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  outline: 4px solid yellowgreen;
  background: greenyellow;
}
<div id=container>
<div class=blue></div><div class=blue></div><div class=blue></div>
<div id=green></div>
</div>
4
Le____

擬似を使用して最初の3つのコンテナを1行下に移動し、margin:auto最後へ

div {
  display:flex;
  flex-wrap:wrap;
  border:#0066FD solid;;
  width:200px;
  height:200px;
  justify-content:space-around;
  /* show me box center */
  background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%)
 
}

span, div:before {
  width:50px;
  height:50px;
  border:solid #01CDFF;
  margin:0 auto 0;
}
span:last-of-type , div:before{
  margin: 12px auto;
  border:solid  #01FE43;
}
div:before {
  content:'';
  width:100%;
  border:none;
}

span {
   /* show me box center */
  background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%)
  }
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
3
G-Cyr