带有无序列表的Flexbox [英] Flexbox with Unordered list

问题描述

我试图学习flexbox，我真的很喜欢它。我正在尝试使用动态宽度，当我用div做它的作品。如果我尝试用李的方式来做，那也不行。我的代码在 codepen 上。

  div.example 
 ul 
 li 
 | 1 
 li 
 | 2 
 li 
 | 3 
 li 
 | 4 
 li 
 | 5 
 li 
 | 6 
 
 div.container 
 div.col 
 | 1 
 div.col 
 | 2 
 div.col 
 | 3 
 div.col 
 | 4 
 div.col 
 | 5 
 div.col 
 | 6 
  

SASS编码

  .container {
 border：1px solid＃000; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
宽度：50％; 
 
 .col {
 width：calc（100％/ 3）; 
 height：120px; 
 text-align：center; 
} 
} 
 
 .example {
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
宽度：50％; 
 border：1px solid＃000; 
保证金：1em 0; 
 
 ul {
 width：100％; 
 padding-left：0; 
} 
 
 li {
 list-style：none; 
 display：inline-block; 
 width：calc（100％/ 3）; 
 height：120px; 
 text-align：center; 
 
 
 
 $ div $解析方案

需要将flex属性应用于< ul>

  ul {
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
 
 
 
 $ b 
将属性放在< div> 告诉它在flex中显示< ul> ，而不是< li> 。  
I am trying to learn flexbox and I really like it. I am trying play with dynamic widths and when I do it with divs it works. If I try to do it with li, it does not work as well. My code is up on codepen.
div.example
  ul
    li
      | 1
    li
      | 2
    li
      | 3
    li
      | 4
    li
      | 5
    li
      | 6

div.container
  div.col
    | 1
  div.col
    | 2
  div.col
    | 3
  div.col
    | 4
  div.col
    | 5
  div.col
    | 6
SASS Code
.container {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;

  .col {
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

.example {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

解决方案
You need to apply the flex properties to the <ul>
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
Putting the properties on the <div> tells it to display the <ul> in flex, not <li>.

                        
这篇关于带有无序列表的Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！