中心与Flexbox的

我有这样的代码：中心与Flexbox的

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    flex-grow: 1; 
 
} 
 

 
a { 
 
    display: block; 
 
}

<ul> 
 
    <li><a href="#">Test 1</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
    <li><a href="#">Test 3</a></li> 
 
    <li><a href="#">Test 4</a></li> 
 
    <li><a href="#">Test 5</a></li> 
 
</ul>

我想我的链接是中心垂直和水平。另外他们必须适合<li>容器。

你能继承flex-grow属性吗？

感谢您的帮助！

来源

2017-03-21 Corentin Branquet

如果加上'的text-align：center'的链接进入中心，你想要什么，别的吗？ –

只是使li和a柔性太

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    flex-grow: 1; 
 
    display: flex; 
 
} 
 

 
a { 
 
    flex-grow: 1; 
 
    align-items:center; 
 
    justify-content:center; 
 
    display:flex; 
 
}

<ul> 
 
    <li><a href="#">Test 1</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
    <li><a href="#">Test 3</a></li> 
 
    <li><a href="#">Test 4</a></li> 
 
    <li><a href="#">Test 5</a></li> 
 
</ul>

来源

2017-03-21 10:20:15 Pete

感谢它的工作！ –

不客气，很高兴我可以帮助:) – Pete

只需添加一个text-align: center您li使其居中，和flex: 1您li和height: 100%您a使它占据其父母身高的100％。

试试这个：

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
    flex: 1; 
 
} 
 

 
a { 
 
    display: block; 
 
    height: 100%; 
 
}

<ul> 
 
    <li><a href="#">Test 1</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
    <li><a href="#">Test 3</a></li> 
 
    <li><a href="#">Test 4</a></li> 
 
    <li><a href="#">Test 5</a></li> 
 
</ul>

来源

2017-03-21 10:22:41 nashcheez

的问题是，每个列表项（子）也含有一个孩子（链接）。

因此，还可以将display:flex;添加到li，然后您可以使用li上的flex属性。

body { 
 
    margin: 0; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    flex-grow: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
a { 
 
    display: block; 
 
    align-self:center; 
 
}

<ul> 
 
    <li><a href="#">Test 1</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
    <li><a href="#">Test 3</a></li> 
 
    <li><a href="#">Test 4</a></li> 
 
    <li><a href="#">Test 5</a></li> 
 
</ul>

来源

2017-03-21 10:25:01 Brad

中心与Flexbox的

回答

相关问题