text Flexbox的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text Flexbox的相关的知识，希望对你有一定的参考价值。
<div class="d-flex row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX ROW REVERSE -->
<div class="d-flex flex-row-reverse row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT START -->
<div class="d-flex justify-content-start row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT CENTER -->
<div class="d-flex justify-content-center row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT END -->
<div class=" d-flex justify-content-end row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT AROUND -->
<div class="d-flex justify-content-around row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
<div class=" d-flex justify-content-between row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN -->
<div class=" d-flex flex-column row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN REVERSE -->
<div class="d-flex flex-column-reverse row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - START -->
<div class="d-flex align-items-start row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - CENTER -->
<div class="d-flex align-items-center row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - END -->
<div class="d-flex align-items-end row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - BASELINE -->
<div class="d-flex align-items-baseline row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - STRETCH -->
<div class="d-flex align-items-stetch row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- ALIGN SELF -->
<div class="d-flex row-hl">
<div class="align-self-start p-4 item-hl">Flex Item</div>
<div class="align-self-center p-4 item-hl">Flex Item</div>
<div class="align-self-end p-4 item-hl">Flex Item</div>
<div class="align-self-baselinep-4 item-hl">Flex Item</div>
<div class="align-self-stretch p-4 item-hl">Flex Item</div>
</div>以上是关于text Flexbox的的主要内容，如果未能解决你的问题，请参考以下文章