ширина flexbox 100% не покрывает всю ширину страницы - PullRequest
Новая
       140

ширина flexbox 100% не покрывает всю ширину страницы

1 голос
/ 07 августа 2020

У меня есть следующие CSS: 

.turbineContainer{
        width: 50%;
        flex-wrap: wrap;
        display: flex;
        
      }
      .turbineIcons{               
          background-color:white;           
          margin: 1em;
          height: 50px;
          width: 100px;
      }

      .container {
        display: flex;
       width: 100%;
      }
              
      .left-half {
        flex-wrap: wrap;
        display: flex;
        background-color: #f7941d;
        flex: 1;
      }
      
      .right-half {
        background-color: #8d5022;
        flex: 1;
      }

вот мой Html: 

    <div class="container">
          <div class="left-half">
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>       
        </div> 
        <div class="right-half">
          here is the Right Panel             
          </div>
        </div>

Я разделил страницу на две части, левую и правую, Я установил ширину 100%, чтобы покрыть всю ширину страницы, но я вижу эти две части, размещенные посередине страницы, я приложил снимок экрана с тем, что я получаю Снимок экрана

Ответы [ 2 ]

2 голосов
/ 07 августа 2020

Вот рабочий пример: 

.container {
    display: flex;
}

.container .left-half .turbineIcons{               
    background-color:white;           
    flex: 1;
    margin: 1em;
    min-width: 25%;
    height: 50px;
}
                  
.container .left-half {
    flex-wrap: wrap;
    display: flex;
    background-color: #f7941d;
    flex: 1;
}
          
.container .right-half {
    background-color: #8d5022;
    flex: 1;
}
<div class="container">
    <div class="left-half">
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>       
    </div>
    <div class="right-half">here is the Right Panel</div></div>
2 голосов
/ 07 августа 2020

Судя по классу .container вы ведь используете bootstrap? он имеет максимальную ширину, поэтому он не является 100% шириной.

Контейнеры являются основным c элементом макета в Bootstrap и необходимы при использовании нашей сеточной системы по умолчанию. Выберите из адаптивного контейнера фиксированной ширины (что означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (что означает, что он всегда на 100% шириной).

Используйте .container-fluid для контейнер на всю ширину, охватывающий всю ширину области просмотра.

https://getbootstrap.com/docs/4.0/layout/overview/

...