カラム表示について

[匿名]

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>

特に難しい記述もなく、今まで別なサイトでは、こんな感じでできてたのですが
こちらのテーマは何か、反映されない理由（箇所）があるのでしょうか？

よろしくお願いいたします。

[石川＠Vektor,Inc.]

colmun_flex が id なら

#colmun_flex{
 display: flex;
 justify-content:;
 flex-wrap: wrap;
 width: 100%;
}

です。

.colmun_flex{

なら

<div class="column_flex">

になります。

[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 をベースとしているため、グリッドシステムを使用できます。

[石川＠Vektor,Inc.]

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

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

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

[投稿者]

投稿