Задать вопрос

Константин Боровик

.NET Developer
Ответы пользователя по тегу CSS

  • Почему не работает justify-content, если задаешь ширину флекс-контейнеру?

    @PushMeNow
    .NET Developer
    Если не задаю ширину флекс-контейнеру, то jutify-content работает

    Вы сами ответили на свой вопрос. Если вам нужно выровнять внутренние элементы то просто уберите ширину - это не inline объекты. Если вы хотите выровнять всю форму, то оберните её в div и примените flex-свойства:
    <div style="display:flex;justify-content:center">
  <form>
  <input class="subscribe-field">
  <input class="button-subscribe">
</form>
</div>

    А вообще повнимательнее почитайте свойства flex-объектов. Как дочерние объекты выравняются если вы ограничили свободное пространство до их суммарной ширины.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как использовать стиль DISPLAY: FLEX, чтобы он соответствовал стилю DISPLAY:TABLE в CSS?

    @PushMeNow
    .NET Developer
    Если я вас правильно понял, то действия следующие:
    1. Берём родительский блок, задаём flex. Задаём два дочерних блока. Высота дочерних блоков будет равна высоте родительского. Это специфика flex-объектов.
    <div style="display:flex">
  <div></div>
    <div></div>
  </div>
</div>

    2. Для манипуляции ширины дочерних блоков используется свойство flex-grow:
    <div style="display:flex">
  <div style="flex-grow:2"></div>
    <div style="flex-grow:1"></div>
  </div>
</div>

    Это свойство действует как пропорция, всё пространство родителя делится на суммарное число flex-grow и каждой дочке выделяется столько частей, сколько указано в её flex-grow.
    Можно также одной из дочек явно указать ширину width. Тогда другой дочке нужно присвоить flex-grow:1, чтобы она растянулась на оставшуюся ширину.
    Вот пример. Надеюсь я вам помог =)
    Ответ написан
    10 комментариев
    10 комментариев

  • Почему не работает flex-grow?

    @PushMeNow
    .NET Developer
    так а вы не тому элементу присваиваете этот класс. если в общих чертах, то правильный варинт будет примерно такой:
    <header>

<a href="main.html" class="logo">
		<div>
	
					<div class="logotype">
				 			<img src="logo3.jpg" id="logojpg">
					</div>

					<div class="companyname">
						<p>ALEXANDER SHNEYDMILLER </p>
					</div>

		</div>
</a>

		
			<!--МЕНЮ САЙТА -->
			<div class="list-menu">
				<div class="nav-toggle"><span></span></div>
				<ul id="menu">
					<li><a href="main.html#b"> Галерея</a></li>
					<li><a href="#a">Контакты</a></li>
					<li><a href="#a">Обо мне</a></li>
				</ul>
			</div>
</header>

    т.е. перемеcтите класс logo на уровень выше и все будет.
    Ответ написан
    Комментировать
    Комментировать