How to align elements within a DIV to the left of it

Asked

Viewed 7,860 times

2

I’d like it to stay this way: inserir a descrição da imagem aqui

.episodesContainer
{
    width: 90%;
    height: auto;
    background: rgba(105, 203, 115, 0.5);
    margin-top: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 4px;
}
.episode
{
    width: 45px;
    height: 45px;
    background: #76c764;
    margin: 4px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14pt;
    font-family: "Futura"; 
    border-color: #AAFCB8;
    cursor: pointer;
    outline: none;
}
<div class="episodesContainer">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">

</div>

css

1 answer

3


Changing the property justify-content for left:

justify-content: left;


.episodesContainer
{
    width: 90%;
    height: auto;
    background: rgba(105, 203, 115, 0.5);
    margin-top: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 4px;
}
.episode
{
    width: 45px;
    height: 45px;
    background: #76c764;
    margin: 4px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14pt;
    font-family: "Futura"; 
    border-color: #AAFCB8;
    cursor: pointer;
    outline: none;
}
<div class="episodesContainer">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">

</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.