1. Home
›
2. CSS
›
3. display

CSS - display

設定方法

inline
block
list-item
run-in
inline-block

table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption

ruby
ruby-base
ruby-text
ruby-base-container

none
inherit

flex
inline-flex

grid
inline-grid

フレックスボックス使用例 - ベースHTML

<style>
.parent { background: #fffaf0; }
.child { width:200px; }
.parent .child:nth-child(1) { background: #ff69b4; }
.parent .child:nth-child(2) { background: #4169e1; }
.parent .child:nth-child(3) { background: #ffd700; }
.parent .child:nth-child(4) { background: #98fb98; }
</style>
<div class="parent">
  <div class="child">子要素1</div>
  <div class="child">子要素2</div>
  <div class="child">子要素3</div>
  <div class="child">子要素4</div>
</div>

flex

.flex { display: flex; display: -webkit-flex; }
.inline-flex { display: inline-flex; display: -webkit-inline-flex; }

親要素に「flex」クラスを設定

flex-direction

.flex-direction-row { flex-direction: row; -webkit-flex-direction: row; }
.flex-direction-row-reverse { flex-direction: row-reverse; -webkit-flex-direction: row-reverse; }
.flex-direction-column { flex-direction: column; -webkit-flex-direction: column; }
.flex-direction-column-reverse { flex-direction: column-reverse; -webkit-flex-direction: column-reverse; }

親要素に「flex」と「flex-direction-row」クラスを設定

親要素に「flex」と「flex-direction-row-reverse」クラスを設定

親要素に「flex」と「flex-direction-column」クラスを設定

親要素に「flex」と「flex-direction-column-reverse」クラスを設定

flex-wrap

.flex-wrap-nowrap { flex-wrap: nowrap; -webkit-flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.flex-wrap-wrap-reverse { flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; }

親要素に「flex」と「flex-wrap-nowrap」クラスを設定

親要素に「flex」と「flex-wrap-wrap」クラスを設定

親要素に「flex」と「flex-wrap-wrap-reverse」クラスを設定

flex-flow

「flex-direction」プロパティと「flex-wrap」プロパティの値を一度に設定可能なプロパティ。

.flex-flow-row-nowrap { flex-flow: row nowrap; -webkit-flex-flow: row nowrap; }
.flex-flow-row-wrap { flex-flow: row wrap; -webkit-flex-flow: row wrap; }
.flex-flow-row-wrap-reverse { flex-flow: row wrap-reverse; -webkit-flex-flow: row wrap-reverse; }

.flex-flow-row-reverse-nowrap { flex-flow: row-reverse nowrap; -webkit-flex-flow: row-reverse nowrap; }
.flex-flow-row-reverse-wrap { flex-flow: row-reverse wrap; -webkit-flex-flow: row-reverse wrap; }
.flex-flow-row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse; -webkit-flex-flow: row-reverse wrap-reverse; }

親要素に「flex」と「flex-flow-row-nowrap」クラスを設定

親要素に「flex」と「flex-flow-row-wrap」クラスを設定

親要素に「flex」と「flex-flow-row-wrap-reverse」クラスを設定

親要素に「flex」と「flex-flow-row-reverse-nowrap」クラスを設定

親要素に「flex」と「flex-flow-row-reverse-wrap」クラスを設定

親要素に「flex」と「flex-flow-row-reverse-wrap-reverse」クラスを設定

justify-content

.flex-justify-content-flex-start { justify-content: flex-start; }
.flex-justify-content-flex-end { justify-content: flex-end; }
.flex-justify-content-center { justify-content: center; }
.flex-justify-content-space-between { justify-content: space-between; }
.flex-justify-content-space-around { justify-content: space-around; }

親要素に「flex」と「flex-justify-content-flex-start」クラスを設定

親要素に「flex」と「flex-justify-content-flex-end」クラスを設定

親要素に「flex」と「flex-justify-content-center」クラスを設定

親要素に「flex」と「flex-justify-content-space-between」クラスを設定

親要素に「flex」と「flex-justify-content-space-around」クラスを設定

align-items

align-content