Gatsby×ブログ - 画像を横並びにする小技
— Gatsby — 1 min read
記事を書いてるとき,画像を横に並べたくなったけど,なかなか上手くできなかったので,その時のメモ.
Flexとdivで囲う
使用プラグイン:gatsby-plugin-theme-ui
1---2/*** Frontmatter ***/3---4import { Flex } from "theme-ui"5
6## 記事-17
8<Flex sx={{9 flexDirection: [`column`, `row`],10 "& > *": { width: `100%` },11}}>12
13<div><img src="./image-1.png" alt="image-1" /></div>14
15<div><img src="./image-2.png" alt="image-2" /></div>16
17</Flex>18
19## 記事-2
未解決
<img />
タグでmagineを自動で取ってくる.使用しているスターターのテーマに依存すると思われるが,どこを直せばいいか分からない.
Tips
- 必要な場所で改行しないと,表示が変になる可能性大.
"& > *": { width: '100%' }
を指定しないと,Gatsbyがimgの大きさを決定できないっぽくて,上手く挿入できない.flexDirection: ['column', 'row']
はモバイル時縦並び,PC時横並びのスタイル設定.
— Gatsby —