フレックスボックスを使用したテーブルレイアウト

Question

フレックスボックスにレイアウトのようなテーブルを作成しようとしていますが、動作しません。

私はこのような何かしたい：私を得る代わりに

<image> | <image> 

Text  | Text 

を：

<image> Text | <image> Text 

#container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#item { 
 
    flex-direction: row; 
 
    font-family: Georgia, serif; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <div id="item"><img src="img/3dsteak.png" />Steak</div> 
 
    <div id="item"><img src="img/burger.png" />Burger</div> 
 
</div>

Answer 1

flex-directionプロパティは、フレックスコンテナに適用されます。あなたのコードでは、それはフレックスアイテムにあります。これは効果がありません。 （。。たぶん私はあなたのテキストを考慮子猫のプレースホルダを使用していないはずですが、私はこのシンプルで便利なツールにこだわってる猫愛好家に悪気は意図していない）

#container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-family: Georgia, serif; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    <div id="item"> 
 
     <img src="https://placekitten.com/100/100"> 
 
     <span>Steak</span> 
 
    </div> 
 
    <div id="item"> 
 
     <img src="https://placekitten.com/100/100"> 
 
     <span>Burger</span> 
 
    </div> 
 
</div>

：これを試してみてください

Answer 2

は同じくらい簡単ですあなたは言及しました。 divにはテキストを別々に入れる必要があります。 #itemでフレックスでもっと魔法をやります。これをチェックしてください

body { 
 
    margin:0 
 
} 
 
#main_background { 
 
    background: url(../img/bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#container { 
 
    /*width: 100%; 
 
    height: 100%;*/ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#item { 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-flow: row wrap; 
 
    font-family: Georgia, serif; 
 
    font-size: 200% ; 
 
    font-weight: bold; 
 
    margin-right:10px; 
 
    display:flex; 
 
    justify-content:center; 
 

 
} 
 
img { 
 
    width:100%; 
 
    margin-right:10px; 
 
    height:150px 
 
} 
 
img:last-child { 
 
    margin-right:0 
 
}

<div id="container"> 
 
    <div id="item"> 
 
    <img src="https://pbs.twimg.com/profile_images/668243842185973760/n15no_UF.jpg"/> 
 
    <div> 
 
     Steak 
 
    </div> 
 
    </div> 
 
    <div id="item"> 
 
    <img src="https://pbs.twimg.com/profile_images/668243842185973760/n15no_UF.jpg"/> 
 
    <div> 
 
     Steak 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

以下のコードを参照してください。あなたはこれを期待していますか？

#main_background { 
 
    background: url(../img/bg.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#container { 
 
    /*width: 100%; 
 
    height: 100%;*/ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#item { 
 
    margin:10px; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    font-family: Georgia, serif; 
 
    font-size: 200% ; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <div id="item"> <img src="img/3dsteak.png"/><br /> Steak </div> 
 
    <div id="item"> <img src="img/burger.png"/><br /> Burger </div> 
 
</div>