时间戳

首页 > 解决方案 > 无法使用 css flexbox 设置元素样式

css - 无法使用 css flexbox 设置元素样式

问题描述

我很难div在垂直对齐的位置设置元素的样式。
这是片段。我对 CSS flexbox 很陌生。

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
#container {
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}

#frameworks-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered;
  background-color: white;
  color: black;
  border-radius: 25px;
  font-weight: 800;
  line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width: 400px;
  height: auto;
}

.framework_rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: orangered;
  border-radius: 50%;
  text-align: center;
}
<div id="container">
  <div id="frameworks-wrapper">
    <h3>Favorites Web Frameworks ratings</h3>
    <div><span class="framework_rating">3</span>React</div>
    <div><span class="framework_rating">6</span>Blazor</div>
    <div><span class="framework_rating">2</span>Knockout.js</div>
  </div>
</div>

如您所见，评级和名称应该在同一行。我将不胜感激任何帮助。

标签： cssflexbox

解决方案

您只需要在div包装器内部添加 css：

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
 
#container{
  margin: auto;
  width: 50%;
  padding: 10px;
  font-family: Lato, sans-serif;
}


#frameworks-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid orangered; 
  background-color: white; 
  color: black;
  border-radius: 25px; 
  font-weight: 800; line-height: 1.2;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  width:400px;
  height:auto;
}

#frameworks-wrapper>div{
  width: 100px;
  display: flex;
  justify-content: space-between;
}

.framework_rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: orangered;
    border-radius: 50%;
    text-align: center;
}
<body>
   <div id="container">
      <div id="frameworks-wrapper">
          <h3>Favorites Web Frameworks ratings</h3> 
          <div><span class="framework_rating" >3</span>React</div>
          <div><span class="framework_rating" >6</span>Blazor</div>
          <div><span class="framework_rating" >2</span>Knockout.js</div>
      </div>
   </div>
</body>

推荐阅读