Lism CSS
検索

SideMain (l--sideMain)

l--sideMain は、メディアクエリ・コンテナクエリに依存せず、維持したいコンテンツの長さを基準にして横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。

  • サイドコンテンツの横幅を--sideWで指定し、メインコンテンツには可能な限り維持したい横幅を--mainWで指定します。
  • メインコンテンツ側が--mainWを維持できる範囲内で横並びが維持され、それを下回ってしまう場合は縦並びへ自動で切り替わります。

「画像とコンテンツ」、「メインエリアとサイドバー」のようなレイアウトに活用できます。

CSS

/*
	Note: fxgの比率を 1:でかい数 にして、fix側を広がらないようにする。
      flex-grow は 変数指定だと挙動が変になることにも注意。
 */
.l--sideMain {
  --sideW: auto;
  --mainW: max(20rem, 50%);
  display: flex;
  flex-wrap: wrap;

  > .is--side {
    flex-basis: var(--sideW);
    flex-grow: 1; /* 0 だと折り返されたときに広がらない */
  }

  > :not(.is--side) {
    flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
    flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
  }
}

子要素の一方に.is--sideが必要です。

div.l--sideMain
  div
  div.is--side

Lismコンポーネント

Import

import { SideMain } from 'lism-css/react';

専用Props

プロパティ出力説明
sideW --sideW side要素の横幅
mainW --mainW main要素で維持したい最小幅

Usage

.is--sideの横幅を--sideWで指定した値に固定しつつ、もう一方のメイン要素が--mainWで指定した横幅を下回るようになると、自動で1カラムに切り替わるようになっています。

使用例

↓
使用例

Main Content

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content

リサイズ 
<SideMain sideW="12rem" mainW="20rem" g="20">
  <Box p="15" bd bdc="blue">
    <p>Main Content</p>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box isSide p="15" bd bdc="red">
    <p>Side Content</p>
  </Box>
</SideMain>

反転

-fxd:row-reverseクラス（flex-direction:row-reverse）を併用することで、横並びの時の順番だけを反転させることができます。

これにより、横並びの時は左側、縦並びの時は下側にside要素を配置できます。

↓
例

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
リサイズ 
<SideMain fxd="row-reverse" sideW="10rem" mainW="16rem" g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box isSide>Side Content</Box>
</SideMain>

Gridを使って似たレイアウトを構成する例

SideMain(.l--sideMain)はブレイクポイントに依存しませんが、Gridで構成することで、レイアウトの切り替えポイントをブレイクポイントで指定して同じようなレイアウトを構築することもできます。

↓
Gridを使ってSideMainのようなレイアウトを構築する例

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
リサイズ 
<Grid gta={[`'.' 'side'`, `'. side'`]} gtc={[null, '1fr 10rem']} g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box ga="side">Side Content</Box>
</Grid>
↓
sideを左側、ブレイクポイントを@mdにする例

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Side Content
リサイズ 
<Grid gta={[`'.' 'side'`, null, `'side .'`]} gtc={[null, null, '10rem 1fr']} g="20">
  <Box>
    <p>
      Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut.
    </p>
  </Box>
  <Box ga="side">Side Content</Box>
</Grid>

© Lism CSS. All rights reserved.

目次