bootstrap学习 flex布局

折腾了好久，在仿照bootstrap官网上的案例时没有达到想要的效果

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

然而在我电脑上nav并没有居中
后来发现是把ul套在了row里，因为row自带defalut:flex属性，所以导致ul的.justify-content-center失效了，如果要修改的话就应该给row套上.justify-content-center就可以了（其实早就发现了这一点，但就是一直想找出为什么官网成功居中了我没有成功。。）
网上关于flex的语法教程实在是太泛泛了，看完之后怎么用还是一脸懵逼
找到一个正确使用flex的例子：

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
</body>

在这里插入图片描述

Flex布局（一：基本概念和容器属性）
Flex 布局语法教程

其实就是把带default:flex的对象作为一个容器，然后就可以通过在容器的css中指定各种属性来安排子项的排列方式。在子项中加各种属性是无效的。

bootstrap学习 flex布局

猜你喜欢