カラム表示について

このトピックには3件の返信、3人の参加者があり、最後に匿名により5年、 5ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2019年7月12日 12:28 PM #17329
匿名
ゲスト
Lightning Pro
JPNSTYLE

こちらを購入したものですが
固定ページで
flexboxを記入したのですが
どうも反映されない感じです。

ちなみにサンプル子テーマをダウンロードし使っています。
CSSに
```
.colmun_flex{
 display: flex;
 justify-content:;
 flex-wrap: wrap;
 width: 100%;
}
.column_box{
 width: 30%;
}
.column_box img{
width: 100%;
border: 3px solid #fff;
}
```
こんな感じです。
HTMLは
```
<div id="column_flex">
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall01.jpg"></div>
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall02.jpg"></div>
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall03.jpg"></div>
</div>
```
特に難しい記述もなく、今まで別なサイトでは、こんな感じでできてたのですが
こちらのテーマは何か、反映されない理由（箇所）があるのでしょうか？

よろしくお願いいたします。
2019年7月12日 12:33 PM #17333
石川＠Vektor,Inc.
キーマスター
制作実績
colmun_flex が id なら
```
#colmun_flex{
 display: flex;
 justify-content:;
 flex-wrap: wrap;
 width: 100%;
}
```
です。

.colmun_flex{

なら

<div class="column_flex">

になります。
2019年7月12日 12:37 PM #17334
DRILL LANCER
モデレーター
```
.colmun_flex{
 display: flex;
 justify-content:;
 flex-wrap: wrap;
 width: 100%;
}
.column_box{
 width: 30%;
}
.column_box img{
width: 100%;
border: 3px solid #fff;
}
```
上記のようにCSSで定義しているので
```
<div class="column_flex">
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall01.jpg"></div>
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall02.jpg"></div>
<div class="column_box"><img src="/wp-content/uploads/2019/07/hall03.jpg"></div>
</div>
```
でないと正常に反映されないと思います。
ちなみに、cssでのidに該当するものは#です。

あと、Lightning は Bootstrap をベースとしているため、グリッドシステムを使用できます。
2019年7月12日 12:37 PM #17335

石川＠Vektor,Inc.
キーマスター
制作実績

あとはそもそもCSSを書かなくても特定の記述でできます。

http://bootstrap3-guide.com/base/grid.html

あとはそもそもブロックエディタの「カラムブロック」を使えばコードを書かずにできます。
投稿者

投稿