私はAngularにprimeNGを使用しています
https://www.primefaces.org/primeng/#/flexgrid
私がこれを試しているとき
<div class="p-grid">
<div class="p-col-6">
<div class="box">6 </div>
</div>
<div class="p-col-6">
<div class="box">6 </div>
</div>
</div>
ボックスは互いに重なり合っており、隣り合っていません。
npm install primeflex --save
と追加
"node_modules/primeflex/primeflex.css"
angle.jsonに
primeflex.cssに関連するもののようです
p-colクラスは正常に機能していますが、p-col-#(p-col-1、p-col-2など)が期待どおりに機能していません
これはp-colの値です
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
padding: 0.5em;
これはp-col-#の値です
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0.5em;
たとえば、p-col-#のパディングを0に変更すると、機能しますが、パディングがありません。(p-col-#をp-colと同じ値に変更しようとしました。それは機能していません)
何か案は ?
ありがとうRahav
それは私のAngular6プロジェクトでの作業です。
primeNGとPrimeFlexをインストールします
npm install primeng --save
npm install primeflex --save
angle.jsonにスタイルを追加する
"./node_modules/primeng/resources/primeng.css",
"./node_modules/primeflex/primeflex.css"
app.component.html
<div class="p-grid">
<div class="p-col">1</div>
<div class="p-col">2</div>
<div class="p-col">3</div>
</div>
PrimeNGPrimeFlexのAngular 7)でも同じ問題が発生しました。
それを修正するためにstyles.cssファイルに以下を追加しました。
* {
-webkit-box-sizing: border-box;
}