CSS flexboxアーキテクチャを使用してテキストコンポーネントをスタイルする方法は？

Question

私は、CSSとフロントエンドの開発には一般的に新しいです。

私はCSS Flexボックスを使用して、異なるサイズの画面で完全に動作する流体レイアウトを作成できることを知りました。

私は現在Reactとhttps://roylee0704.github.io/react-flexbox-grid/を使用しています。これまでは3列のレイアウトボックスを作成することができました。しかし、列のテキストが正しく整列していないことがわかりました。

だから私はそれがブラウザ上で良く見えるようにいくつかのパディングを追加しました：のための私のコードを

：

しかし、小さな画面上で、これは右見ていませんこの部分はのように見える

const MenuItemStyle = { 
    paddingTop: '3%' 
}; 

const MenuPriceStyle = { 
    paddingTop: '6%' 
}; 

const SpicyMenuItem = (props) => (
    // add price on right side 
    <Grid fluid> 
     <Row center="lg"> 
      <Col xs={3} sm={3} lg={2}><Avatar src={props.image}/></Col> 
      <Col xs={6} sm={6} lg={4}> 
       <div style={MenuItemStyle}>{props.name}</div> 
      </Col> 
      <Col xs={3} sm={3} lg={2}> 
       <div style={MenuPriceStyle}>{props.price}</div> 
      </Col> 
     </Row> 
    </Grid> 
); 

の質問

• はレイアウトに使用フレキシボックスですか？
• フレックスボックスは、レイアウト、カラム内のテキスト、画像、アイコンの整列に役立ちますか？
• media-queriesを使用し、別の画面サイズのテキスト、イメージ、アイコンを整列するための個別のルールを書くことをお勧めしますか？

flexboxの他に、media-queriesを書き込む必要があるかどうか混乱します。

Answer 1

質問 - フレックスボックスはレイアウトのみに使用されていますか？ ここでの意味は不明ですが、必要に応じてレスポンスグリッドレイアウトの作成に使用できます。 CSS-Gridは別の方法かもしれませんが、もっと簡単な方法です。

• フレックスボックスは、レイアウト、カラム内のテキスト、画像、アイコンを整列させる際に役立ちますか？

絶対に。フレックスボックスのコンテンツを調整する際には、非常に柔軟性の高いガイドが多数あります。あまりにも多く、既に議論されているので、私はここですべてを通過しようとすることさえしません。

は、これらのリンクをチェックアウト：

https://css-tricks.com/almanac/properties/a/align-content/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

• それはメディアクエリを使用することをお勧めしますとのテキスト、画像、アイコンを整列するために、別のルールを書きます異なる画面サイズ？私はまだフレックスボックスの使用に加えてメディアクエリーを書く必要があるかどうか混乱しています。

ほとんどの場合、メディアクエリは必要ありません。モバイルの動作をflexboxのデフォルトの動作以外のものに変更する場合にのみ必要です。何もメディアの問い合わせをしないで始めると、携帯電話の外観が好きかどうかを確認するには、いくつか小さな微調整が必​​要です。