ドキュメント : Property
-
【CSS】flex-direction - フレックスコンテナーの主軸方向
CSSのflex-directionプロパティをご紹介します。flex-directionflex-directionはフレックスコンテイナー(display: flex;の要素)の主軸方向を示すプロパティです。基本構文flow-direction: 値;値一般的な値は次の通りです。値意味row書字方向row-reverserowの逆columnブロック軸columnブロック軸の逆サンプルrow&
-
【CSS】flex-wrap - フレックスコンテナーの折り返し
CSSのflex-wrapプロパティをご紹介します。flex-wrapflex-wrapはフレックスコンテイナー(display: flex;の要素)の折り返しを示すプロパティです。基本構文flex-wrap: 値;値一般的な値は次の通りです。値意味nowrap折り返さない。wrap折り返す。wrap-reverse折り返す。(折り返しは上に重なる)サンプルnowrap<style>d
-
【CSS】flex-flow - フレックスコンテナーの主軸方向と折り返し
CSSのflex-flowプロパティをご紹介します。flex-flowflex-flowはフレックスコンテイナー(display: flex;の要素)の主軸方向と折り返しを示すプロパティです。主軸方向と折り返しの個別設定はflex-direction、flex-wrapを使用します。基本構文flex-flow: 主軸方向 折り返し;サンプルサンプル1<style>div { di
-
-
【CSS】order - 要素を並べる順序
CSSのorderプロパティをご紹介します。orderorderはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の子要素の順序を示すプロパティです。基本構文order: 値;サンプルサンプル1<style>div { display: flex; background: lightgray; f
-
【CSS】justify-content - コンテナーの主軸配置
CSSのjustify-contentプロパティをご紹介します。justify-contentjustify-contentはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の主軸配置を示すプロパティです。基本構文justify-content: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄
-
-
-
【CSS】align-content - コンテナーのブロック軸配置
CSSのalign-contentプロパティをご紹介します。align-contentalign-contentはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)のブロック軸配置を示すプロパティです。基本構文align-content: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。ce
-
【CSS】align-self - コンテイナーアイテムの交差軸配置
CSSのalign-selfプロパティをご紹介します。align-selfalign-selfはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)の個別アイテム(要素)の交差軸配置を示すプロパティです。基本構文align-self: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。cente
-
【CSS】align-items - コンテナーの交差軸配置
CSSのalign-itemsプロパティをご紹介します。align-itemsalign-itemsはフレックスコンテイナー(display: flex;の要素)やグリッドコンテイナー(display: grid;の要素)のアイテム(要素)の交差軸配置を示すプロパティです。基本構文align-items: 値;値一般的な値は次の通りです。値意味start先頭側に寄せる。end末尾側に寄せる。cen
-
-
【CSS】float - 浮動(要素の回り込み)
CSSのfloatプロパティをご紹介します。floatfloatは要素の回り込みを示すプロパティです。基本構文float: 値;値一般的な値は次の通りです。値意味noneなし。left左側に回り込む。right右側に回り込む。サンプルleft<style>img { float: left;}</style><div> <img src="/s
-
【CSS】clear - 浮動の解除
CSSのclearプロパティをご紹介します。clearclearは要素の回り込みの解除を示すプロパティです。基本構文clear: 値;値一般的な値は次の通りです。値意味noneなし。left左側に回り込みを解除。right右側に回り込みを解除。both左右の回り込みを解除。サンプルnone<style>.img1 { float: left;}.img2 { float: