Nano Hash - криптовалюты, майнинг, программирование

Угловой материал Flex Box

Я новичок в flexbox, и он кажется очень сложным по сравнению с бутстрапом. У меня есть заставка, где мне нужно центрировать контент по вертикали и горизонтали:

<div layout="row" layout-align="center center">
    <div layout="row" layout-wrap>
        <div flex="30">
            <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
        </div>
        <div flex="45">
            <h2 class="title">example.com</h2>
        </div>
        <div flex="25">
            <h1 class="bang">Bang!</h1>
        </div>
    </div>
</div>

однако он не центрируется, пока я не добавлю к нему высоту:

style="height:500px"

Почему оно так себя ведет? Мой код неправильный? Это не похоже на правильный способ сделать это.

Также с элементами в моем втором row с layout-wrap последний div с flex=25 перекрывает второй div с flex=45.

В основном то, что я хочу сделать, это вертикально и горизонтально центрировать div и иметь возможность разбивать этот div на столько столбцов, сколько мне нравится, сохраняя при этом отзывчивую ширину, которая настраивается в зависимости от размера экрана.

flexbox angular-material
30.10.2016

  • Смотрите обновленный ответ. Помогает ли это вообще? 31.10.2016

Ответы:


1

Возможно, это укажет вам правильное направление — CodePen

Разметка

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-xs="column" layout-align="center center">
    <div flex="30">
      <img ng-src="images/logo.png" src="//:0" alt="example.com" title="Example" />
    </div>
    <div flex="45">
      <h2 class="title">example.com</h2>
    </div>
    <div flex="25">
      <h1 class="bang">Bang!</h1>
    </div>
</div>
30.10.2016
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..