CSS

【CSS】柔軟なグリッドレイアウトFlexible grid

September 16, 2017
Flexible grid

Flexible gridは、フレキシブルグリッドシステムの構築に精通しています。

Flex Container

flex

flex, inline-flex

<div class="flex-row d-flex d-flex">
    <div class="flex-item"> <div class="content"> flex item 1</div></div>
    <div class="flex-item"> <div class="content"> flex item 2</div></div>
    <div class="flex-item"> <div class="content"> flex item 3</div></div>
</div>

inline-flex

<div class="flex-row d-flex d-inline-flex">
    <div class="flex-item"> <div class="content"> flex item 1</div></div>
    <div class="flex-item"> <div class="content"> flex item 2</div></div>
    <div class="flex-item"> <div class="content"> flex item 3</div></div>
</div>

Browser support

  1. Google Chrome
  2. Opera
  3. Firefox
  4. Safari 6.2+
  5. Internet Explorer 10+
  6. iOS 7+
  7. Android 4.4+
  8. Windows Phone 8.1+

MIT