Невозможно стилизовать элементы с помощью css flexbox - PullRequest
Новая
       1

Невозможно стилизовать элементы с помощью css flexbox

0 голосов
/ 13 января 2020

Мне сложно стилизовать элементы внутри 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>

Как видите, рейтинг и имя должны быть на одной строке. Буду признателен за любую помощь.

Ответы [ 3 ]

1 голос
/ 13 января 2020

Простое решение состоит в том, чтобы поместить класс для div, заключающий элементы, которые вы хотите, в одну строку: 

@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;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 25%;
}
<body>
   <div id="container">
      <div id="frameworks-wrapper">
          <h3>Favorites Web Frameworks ratings</h3> 
          <div class="wrapper"><span class="framework_rating" >3</span>React</div>
          <div class="wrapper"><span class="framework_rating" >6</span>Blazor</div>
          <div class="wrapper"><span class="framework_rating" >2</span>Knockout.js</div>
      </div>
   </div>
</body>

Надеюсь, это поможет. С наилучшими пожеланиями.

1 голос
/ 13 января 2020

вам нужно добавить это css в div идентификатора рамки-оболочки. Вы можете использовать flexbox здесь, что дает вам гибкий макет 

#frameworks-wrapper>div{
  display: flex;
}

Для получения дополнительной информации, пожалуйста, ознакомьтесь с этим Руководство по flexbox

1 голос
/ 13 января 2020

Вам просто нужно добавить css на div внутри вашей обертки: 

@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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...