cssとflexを使用したdivの配置

Loic

だから私は単にいくつかのdivをレイアウトし、固定幅やその他のリフロー可能なコンテンツを作成しようとしています。

ここに画像の説明を入力してください

たとえば、上の画像は最小幅の構成を示しています。下の画像は、ウィンドウを拡大するとどうなるかを示しています。実際、ほとんどのアイテムは右または左に固定されていますが、拡大するのは1つの入力だけです。

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 12px;
}
<div class="flex-container">
   <div style="flex-grow: 1">
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
      </div>
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0">Some label</div>
         <div style="flex-grow: 1;">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0">Btn</div>
      </div>
   </div>
   <div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>

N-ate

2番目の画像は、フレックスがどのように機能するかについての誤解を示しています。フレックスは、コンテナを満たすために伸びます。したがって、2番目の画像は使用できません。

2番目の画像の最初の行はフロートレイアウトのように見えます。フレックスで同じことを実現するには、空白を埋めるが、表示されるコンテンツがない空の要素を追加する必要があります。

<div class="flex-container">
   <div style="flex-grow: 1">
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <!-- Adding a "spacer" solves the issue -->
         <div style="flex-grow: 1;"></div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0; flex-basis: 120;">Some label</div>
         <div style="flex-grow: 0; flex-shrink: 0">An Input</div>
      </div>
      <div class="flex-container">
         <div style="flex-grow: 0; flex-shrink: 0">Some label</div>
         <div style="flex-grow: 1;">An Input</div>
         <div style="flex-grow: 0; flex-shrink: 0">Btn</div>
      </div>
   </div>
   <div style="flex-grow: 0; flex-shrink: 0">Big Btn</div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

cssを使用したdiv内の画像とテキストの配置

分類Dev

cssを使用したdivの配置:絶対配置されたdivのレイアウトの問題

分類Dev

divを別のdivの下に配置します[display:flexの使用中]

分類Dev

floatを使用したdivの配置

分類Dev

Bootstrapを使用したDivタグの配置

分類Dev

CSSを使用して1つのボタンと1つのdivを配置する

分類Dev

CSSを使用した<input>の配置

分類Dev

CSSを使用した段落の配置

分類Dev

CSSを使用した画像の配置

分類Dev

Flexを使用して4つのボタンをdivの中央に配置

分類Dev

CSSを使用して画像と重なるdivを配置します

分類Dev

CSSを使用してDIVをDIVの中央に配置

分類Dev

jQueryとCSS、DIVを使用した問題

分類Dev

入力とdivを追加すると、CSS3 + HTML5を使用したメニューの予期しない配置

分類Dev

CSSを使用したテキストの垂直方向と水平方向の配置

分類Dev

cssを使用したレスポンシブな再配置div

分類Dev

CSSを使用したDivの再注文

分類Dev

CSSを使用してdivの後ろに画像を配置する

分類Dev

htmlとcssは、2つの固定divの間に非固定divを配置します

分類Dev

CSS-「position:absolute」を使用するdivの下に「normal」divを配置しますか?

分類Dev

DOMでのJavascriptを使用したDivの配置

分類Dev

flex と border-box を使用した等幅

分類Dev

cssを使用した画像の下のスパンの配置

分類Dev

css-floatを使用した場合の要素の垂直方向の配置

分類Dev

javascriptを使用したdivの作成と削除

分類Dev

2つのHTML / CSS divを並べて配置したい(他の方法を試した)(divの形式も)

分類Dev

cssを使用したasp:gridviewヘッダーの垂直方向の配置

分類Dev

CSS(Volusion Details)のみを使用した要素の再配置

分類Dev

CSSを使用してテキストと画像の一貫した配置を維持する方法

Related 関連記事

  1. 1

    cssを使用したdiv内の画像とテキストの配置

  2. 2

    cssを使用したdivの配置:絶対配置されたdivのレイアウトの問題

  3. 3

    divを別のdivの下に配置します[display:flexの使用中]

  4. 4

    floatを使用したdivの配置

  5. 5

    Bootstrapを使用したDivタグの配置

  6. 6

    CSSを使用して1つのボタンと1つのdivを配置する

  7. 7

    CSSを使用した<input>の配置

  8. 8

    CSSを使用した段落の配置

  9. 9

    CSSを使用した画像の配置

  10. 10

    Flexを使用して4つのボタンをdivの中央に配置

  11. 11

    CSSを使用して画像と重なるdivを配置します

  12. 12

    CSSを使用してDIVをDIVの中央に配置

  13. 13

    jQueryとCSS、DIVを使用した問題

  14. 14

    入力とdivを追加すると、CSS3 + HTML5を使用したメニューの予期しない配置

  15. 15

    CSSを使用したテキストの垂直方向と水平方向の配置

  16. 16

    cssを使用したレスポンシブな再配置div

  17. 17

    CSSを使用したDivの再注文

  18. 18

    CSSを使用してdivの後ろに画像を配置する

  19. 19

    htmlとcssは、2つの固定divの間に非固定divを配置します

  20. 20

    CSS-「position:absolute」を使用するdivの下に「normal」divを配置しますか?

  21. 21

    DOMでのJavascriptを使用したDivの配置

  22. 22

    flex と border-box を使用した等幅

  23. 23

    cssを使用した画像の下のスパンの配置

  24. 24

    css-floatを使用した場合の要素の垂直方向の配置

  25. 25

    javascriptを使用したdivの作成と削除

  26. 26

    2つのHTML / CSS divを並べて配置したい(他の方法を試した)(divの形式も)

  27. 27

    cssを使用したasp:gridviewヘッダーの垂直方向の配置

  28. 28

    CSS(Volusion Details)のみを使用した要素の再配置

  29. 29

    CSSを使用してテキストと画像の一貫した配置を維持する方法

ホットタグ

アーカイブ