Question

我正在创建按钮并将它们完美地放在中间位置我使用一个flexbox包装器围绕我的div向左浮动一旦我链接完整的div＆＃34; Five Columns＆＃34;以下缩小是代码的示例。我想要完成的是每列中有5列将是文本右侧的图标。

＆＃13;

.FlexBox {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
}
.FiveColumns {
  width: 20%;
  float: left;
}
.GreyBorder {
  border: 2px solid #B2B2B2;
}

＆＃13;

<section>
  <div class="FullWidth FlexBox">
    <asp:HyperLink ID="AirFare_HyperLink" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image4" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        AIRFARE
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image1" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        CRUISE
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image2" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        VACATION
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder ">
        <asp:Image ID="Image3" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        REBATE
                                        <p class="Italic">product</p>
                                    </h6>

      </div>
    </asp:HyperLink>
  </div>
</section>

＆＃13;

Answer 1

而不是：

.FiveColumns {
    width: 20%;
    float: left;
}

试试这个：

.FiveColumns {
    flex: 1;
}

请注意，flex容器会忽略子元素上的float属性：

3. Flex Containers: the flex and inline-flex display values


float和clear对Flex项目没有任何影响，也不会将其从流量中删除。

Answer 2

您不需要width: 20%，因为列已在Flexbox中。这是您在.FiveColumns处修改的代码：

.FlexBox {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
}
.FiveColumns {
  float: left;
}
.GreyBorder {
  border: 2px solid #B2B2B2;
}

<section>
  <div class="FullWidth FlexBox">
    <asp:HyperLink ID="AirFare_HyperLink" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image4" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        AIRFARE
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image1" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        CRUISE
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder">
        <asp:Image ID="Image2" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        VACATION
                                        <p class="Italic">product</p>
                                    </h6>
      </div>
    </asp:HyperLink>

    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="">
      <div class="FiveColumns GreyBorder ">
        <asp:Image ID="Image3" runat="server" ImageUrl="https://mktcdn.500px.org/assets/icons/lightbox_placeholder_icon@2x-a5b4509ac42a996d07b9f32379f1eae19310a57d38e5914c59230bfa36815c9a.png" />
        <h6 class="Blue Bold NoMargin">
                                        REBATE
                                        <p class="Italic">product</p>
                                    </h6>

      </div>
    </asp:HyperLink>
  </div>
</section>

.FullWidth班在哪里？

当我链接完整的div时，我的Flexbox不断缩小

2 个答案: