Flexbox в реакции: не изменяет размер

Я пытаюсь отобразить на экране зеленый блок для 1/4 экрана и желтый блок для 3/4 экрана, используя react.js У меня есть следующий код, но зеленый и желтый блоки имеют одинаковый размер.

MyComp.js:

import React from 'react';
import './MyComp.css'

export default class MyComp extends React.Component {
  render() {
    return (
      <div className = "wrapp">
        <div className = "greenBlock">
          <h1>green </h1>
        </div>
        <div className = "yellowBlock">
          <h1>yellow </h1>
        </div>
      </div>
    );
  }
}

MyComp.css:

.wrapp,
html,
body {
  height: 100%;
  margin: 0;
}

.wrapp {
  display: flex;
  flex-direction: column;
}

.greenBlock {
  background-color: green;
  flex: 0.25
}

.yellowBlock {
  background-color: yellow;
  flex: 0.75
}
```

javascript reactjs flexbox

20.05.2019 15:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 543

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я не думаю, что вы можете использовать значения с плавающей запятой в свойстве flex.

вот гид для использования flex-box

Вы должны сделать что-то вроде этого:

.container{
  width: 100%;
  height: 100px;
  display:flex;
}

.a{
  flex: 3;
  background-color: red;
}

.b{
  flex: 1;
  background-color: green;
}


.container-vertical{
  width: 100%;
  height: 100px;
  display:flex;
  flex-direction: column
}

<div class = "container">
   <div class = "a"></div>
   <div class = "b"></div>   
</div>
<br /> <br />
<div class = "container-vertical">
   <div class = "a"></div>
   <div class = "b"></div>   
</div>

Портелла: ваш пример помог мне найти проблему, но это не значение с плавающей запятой. Если я удалю flex-direction: column; оно работает. У вас есть идеи, почему?

— 20.05.2019 15:21

Когда вы меняете flex-direction на столбец, вы меняете ось flex-контейнера, поэтому, когда вы меняете значение flex дочернего элемента, они будут увеличиваться или уменьшаться по оси Y (высоте).

— 20.05.2019 15:25

Я отредактировал свой ответ, чтобы показать вам пример того, как это работает, когда в вашем гибком контейнере для flex-direction установлено значение column

— 20.05.2019 15:29

20.05.2019 15:10

Вы можете использовать свойство flex flex и присваивать числа целыми числами, или вы также можете использовать свойство flex-basis, где вы также можете указать желаемое соотношение в%.

.container{
  display:flex;
  flex-flow: row nowrap;
  height: 200px;
}

.red{
  flex-basis: 66.66666%;
  background-color: red;

}

.green{
  flex-basis: 33.33333%;

  background-color: green;
}

/* OR */



.y{
 flex: 2;
 background-color: yellow;
}

.b{
 flex: 1;
 background-color: blue;
}

<div class = "container">
   <div class = "red"></div>
   <div class = "green"></div>   
</div>
<br/>

<div class = "container">
   <div class = "y"></div>
   <div class = "b"></div>   
</div>

20.05.2019 15:27

Другие вопросы по теме

РеагироватьJS | Показать или скрыть массив объектов на основе флага

Аргумент типа «Страница не найдена 404» не может быть присвоен параметру типа «{ error: string; } & { дети?: ReactNode; }'

Как установить параметр управления масштабированием?

Выпадающее меню topnavbar при наведении исчезает слишком быстро React

При передаче компонента в качестве реквизита я получаю ошибку TS2604, когда пытаюсь его отобразить

Почему страница загружается только с помощью React Router?

Как загрузить файл через API в React?

Компонент не перерисовывается, но состояние редукции изменилось с помощью хуков реакции

Изменение состояния без повторного рендеринга компонента

Отображение логических значений и меток времени внутри таблицы реагирования: React Table+ React+Typescript

Flexbox в реакции: не изменяет размер

Ответы 2

Другие вопросы по теме

Похожие вопросы