CSS：フレックスボックスを使ってHTML構造を簡素化する

Question

たとえば、私はこのレイアウトを持っています。それは以下を含む：

• 左側のイメージ。この画像は垂直方向に中央に表示されます
• 一部のテキストは1行ずつ表示されます。
私はこれと、このようなフレキシボックス、divの位置決めとして、いくつかのレイアウトを使用してのような構造のhtmlとして行うことができます

...

<div class="wrapper"> 
    <image class="avatar"></image> 
    <div class="text"> 
    <div class="name">JameyJohnson</div> 
    <div class="quote">I had little patience to begin with</div> 
    <div class="date">6/10/2017</div> 
    </div> 
</div> 

私はフレキシボックスを適用すると、単にこのHTML（

<div class="wrapper"> 
    <image class="avatar"></image> 
    <div class="name">JameyJohnson</div> 
    <div class="quote">I had little patience to begin with</div> 
    <div class="date">6/10/2017</div> 
</div> 

上記のhtml構造にFlexboxを使用できますか？はいの場合は、どうか教えてください。

Answer 1

フレックスコラムが必要で、その高さはwrapperであり、テキストの応答性が制限されます（テキストが折り返される場合、wrapperのサイズは変更されません）。

カスタム要素が正しく機能するには、型名の前にmy-を使用してください。

スタックは別のオプション

.wrapper { 
 
    display: inline-flex;   /* made it inline so it collapse to content width */ 
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    height: 70px; 
 
} 
 
my-image.avatar { 
 
    background: url(http://placehold.it/30/f00) no-repeat left center; 
 
    height: 100%; 
 
    width: 50px; 
 
} 
 

 
/* sample with img */ 
 
.avatar { 
 
    width: 30px; 
 
    order: -1;     /* move before pseudo */ 
 
} 
 
.wrapper.nr2::before {   /* a delimiter that break into a column of its own */ 
 
    content: ''; 
 
    height: 70px; 
 
    width: 20px; 
 
}

<div class="wrapper"> 
 
    <my-image class="avatar"></my-image> 
 
    <div class="name">JameyJohnson</div> 
 
    <div class="quote">I had little patience to begin with</div> 
 
    <div class="date">6/10/2017</div> 
 
</div> 
 

 
<div></div> 
 

 
<div class="wrapper nr2"> 
 
    <img class="avatar" src="http://placehold.it/30/f00"> 
 
    <div class="name">JameyJohnson</div> 
 
    <div class="quote">I had little patience to begin with</div> 
 
    <div class="date">6/10/2017</div> 
 
</div>

---

スニペットwrapperにbackground-imageを使用し、それを左パディングを（このすべては、フレキシボックス:) O/W行わ与えることです。

スタックは、誰かがbackground-imageを使用する場合にも行うことができ、マークアップ内の画像ソースを設定する必要がある場合に

更新

.wrapper { 
 
    padding-left: 50px; 
 
} 
 
.avatar { 
 
    background: url(http://placehold.it/30/f00) no-repeat left center; 
 
}

<div class="wrapper avatar"> 
 
    <div class="name">JameyJohnson</div> 
 
    <div class="quote">I had little patience to begin with</div> 
 
    <div class="date">6/10/2017</div> 
 
</div>

---

をスニペット、このように、インライン

スタックを使用すると、そのテキストを折り返す可能性がある場合、テキストの応答性を（制限されます `wrapper`上の固定の高さ、と、フレックス列が必要になりますそのために

.wrapper { 
 
    display: inline-flex;   /* made it inline so it collapse to content width */ 
 
    flex-flow: column wrap; 
 
    justify-content: center; 
 
    height: 70px; 
 
} 
 
my-image.avatar { 
 
    background-position: left center; 
 
    background-repeat: no-repeat; 
 
    height: 100%; 
 
    width: 50px; 
 
}

<div class="wrapper"> 
 
    <my-image class="avatar" style="background-image: url(http://placehold.it/30/f00);"></my-image> 
 
    <div class="name">JameyJohnson</div> 
 
    <div class="quote">I had little patience to begin with</div> 
 
    <div class="date">6/10/2017</div> 
 
</div>