Главная страница » CSS » 29. Перенос элементов внутри контейнера

29. Перенос элементов внутри контейнера

Перенос элементов внутри flex-контейнера управляется свойством flex-wrap. Это свойство определяет, должны ли flex-элементы располагаться в одну строку/столбец или могут переноситься на новую строку/столбец при переполнении контейнера. Понимание и использование flex-wrap позволяет создавать адаптивные и гибкие макеты.

Свойство `flex-wrap`

Свойство flex-wrap задаёт, как flex-элементы будут располагаться внутри контейнера при переполнении.

Значения свойства flex-wrap:

nowrap (значение по умолчанию)
- Flex-элементы располагаются в одну строку/столбец и не переносятся.
wrap
- Flex-элементы переносятся на новую строку/столбец, если они не помещаются в одну строку/столбец.
wrap-reverse
- Flex-элементы переносятся на новую строку/столбец в обратном порядке.

Примеры использования

Пример 1: flex-wrap: nowrap (значение по умолчанию)

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: nowrap;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Элемент 1</div>
        <div class="item">Элемент 2</div>
        <div class="item">Элемент 3</div>
        <div class="item">Элемент 4</div>
    </div>
<script>"use strict";function wprRemoveCPCSS(){var preload_stylesheets=document.querySelectorAll('link[data-rocket-async="style"][rel="preload"]');if(preload_stylesheets&&0<preload_stylesheets.length)for(var stylesheet_index=0;stylesheet_index<preload_stylesheets.length;stylesheet_index++){var media=preload_stylesheets[stylesheet_index].getAttribute("media")||"all";if(window.matchMedia(media).matches)return void setTimeout(wprRemoveCPCSS,200)}var elem=document.getElementById("rocket-critical-css");elem&&"remove"in elem&&elem.remove()}window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><noscript><link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://codefor.tech/wp-content/themes/hello-elementor/theme.min.css?ver=3.0.2' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-hello-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/integration/themes/hello-elementor/assets/css/style.css?ver=1724486282' media='all' /><link rel='stylesheet' id='sweetalert2-css' href='https://codefor.tech/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-general-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-smallscreen-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=1724486282' media='only screen and (max-width: 768px)' /><link data-minify="1" rel='stylesheet' id='user-registration-my-account-layout-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='dashicons-css' href='https://codefor.tech/wp-content/cache/min/1/wp-includes/css/dashicons.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='hello-elementor-css' href='https://codefor.tech/wp-content/themes/hello-elementor/style.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://codefor.tech/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://codefor.tech/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.21.8' media='all' /><link rel='stylesheet' id='elementor-post-6-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-6.css?ver=1718118435' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-all-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/all.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='font-awesome-v4-shims-css' href='https://codefor.tech/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/v4-shims.min.css?ver=5.12.0' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-public-styles-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/css/public.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='swiper-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.21.3' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://codefor.tech/wp-content/uploads/elementor/css/global.css?ver=1718118436' media='all' /><link rel='stylesheet' id='elementor-post-1948-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-1948.css?ver=1722992488' media='all' /><link rel='stylesheet' id='elementor-post-8-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-8.css?ver=1719760051' media='all' /><link rel='stylesheet' id='elementor-post-42-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-42.css?ver=1718469014' media='all' /><link rel='stylesheet' id='jquery-chosen-css' href='https://codefor.tech/wp-content/plugins/jet-search/assets/lib/chosen/chosen.min.css?ver=1.8.7' media='all' /><link data-minify="1" rel='stylesheet' id='jet-search-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-search/assets/css/jet-search.css?ver=1724486282' media='all' /><link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap&#038;subset=cyrillic&#038;ver=6.6.2' media='all' /><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/widget-theme-elements.min.css"><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css"><link rel='stylesheet' id='elementor-post-416-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-416.css?ver=1724268811' media='all' /><link rel='stylesheet' id='elementor-post-471-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-471.css?ver=1722847712' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' media='' /><link data-minify="1" rel='stylesheet' id='mailpoet_public-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/mailpoet/assets/dist/css/mailpoet-public.c7ad0042.css?ver=1724486282' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_0-css' href='https://fonts.googleapis.com/css?family=Abril+FatFace%3A400%2C400i%2C700%2C700i%7CAlegreya%3A400%2C400i%2C700%2C700i%7CAlegreya+Sans%3A400%2C400i%2C700%2C700i%7CAmatic+SC%3A400%2C400i%2C700%2C700i%7CAnonymous+Pro%3A400%2C400i%2C700%2C700i%7CArchitects+Daughter%3A400%2C400i%2C700%2C700i%7CArchivo%3A400%2C400i%2C700%2C700i%7CArchivo+Narrow%3A400%2C400i%2C700%2C700i%7CAsap%3A400%2C400i%2C700%2C700i%7CBarlow%3A400%2C400i%2C700%2C700i%7CBioRhyme%3A400%2C400i%2C700%2C700i%7CBonbon%3A400%2C400i%2C700%2C700i%7CCabin%3A400%2C400i%2C700%2C700i%7CCairo%3A400%2C400i%2C700%2C700i%7CCardo%3A400%2C400i%2C700%2C700i%7CChivo%3A400%2C400i%2C700%2C700i%7CConcert+One%3A400%2C400i%2C700%2C700i%7CCormorant%3A400%2C400i%2C700%2C700i%7CCrimson+Text%3A400%2C400i%2C700%2C700i%7CEczar%3A400%2C400i%2C700%2C700i%7CExo+2%3A400%2C400i%2C700%2C700i%7CFira+Sans%3A400%2C400i%2C700%2C700i%7CFjalla+One%3A400%2C400i%2C700%2C700i%7CFrank+Ruhl+Libre%3A400%2C400i%2C700%2C700i%7CGreat+Vibes%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_1-css' href='https://fonts.googleapis.com/css?family=Heebo%3A400%2C400i%2C700%2C700i%7CIBM+Plex%3A400%2C400i%2C700%2C700i%7CInconsolata%3A400%2C400i%2C700%2C700i%7CIndie+Flower%3A400%2C400i%2C700%2C700i%7CInknut+Antiqua%3A400%2C400i%2C700%2C700i%7CInter%3A400%2C400i%2C700%2C700i%7CKarla%3A400%2C400i%2C700%2C700i%7CLibre+Baskerville%3A400%2C400i%2C700%2C700i%7CLibre+Franklin%3A400%2C400i%2C700%2C700i%7CMontserrat%3A400%2C400i%2C700%2C700i%7CNeuton%3A400%2C400i%2C700%2C700i%7CNotable%3A400%2C400i%2C700%2C700i%7CNothing+You+Could+Do%3A400%2C400i%2C700%2C700i%7CNoto+Sans%3A400%2C400i%2C700%2C700i%7CNunito%3A400%2C400i%2C700%2C700i%7COld+Standard+TT%3A400%2C400i%2C700%2C700i%7COxygen%3A400%2C400i%2C700%2C700i%7CPacifico%3A400%2C400i%2C700%2C700i%7CPoppins%3A400%2C400i%2C700%2C700i%7CProza+Libre%3A400%2C400i%2C700%2C700i%7CPT+Sans%3A400%2C400i%2C700%2C700i%7CPT+Serif%3A400%2C400i%2C700%2C700i%7CRakkas%3A400%2C400i%2C700%2C700i%7CReenie+Beanie%3A400%2C400i%2C700%2C700i%7CRoboto+Slab%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_2-css' href='https://fonts.googleapis.com/css?family=Ropa+Sans%3A400%2C400i%2C700%2C700i%7CRubik%3A400%2C400i%2C700%2C700i%7CShadows+Into+Light%3A400%2C400i%2C700%2C700i%7CSpace+Mono%3A400%2C400i%2C700%2C700i%7CSpectral%3A400%2C400i%2C700%2C700i%7CSue+Ellen+Francisco%3A400%2C400i%2C700%2C700i%7CTitillium+Web%3A400%2C400i%2C700%2C700i%7CUbuntu%3A400%2C400i%2C700%2C700i%7CVarela%3A400%2C400i%2C700%2C700i%7CVollkorn%3A400%2C400i%2C700%2C700i%7CWork+Sans%3A400%2C400i%2C700%2C700i%7CYatra+One%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='elementor-post-487-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-487.css?ver=1719159596' media='all' /><link rel='stylesheet' id='elementor-post-497-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-497.css?ver=1724485504' media='all' /><link rel='stylesheet' id='elementor-post-503-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-503.css?ver=1718466482' media='all' /><link rel='stylesheet' id='elementor-post-329-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-329.css?ver=1718467092' media='all' /></noscript></body>
</html>

Пример 2: flex-wrap: wrap

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #90ee90;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Элемент 1</div>
        <div class="item">Элемент 2</div>
        <div class="item">Элемент 3</div>
        <div class="item">Элемент 4</div>
    </div>
<noscript><link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://codefor.tech/wp-content/themes/hello-elementor/theme.min.css?ver=3.0.2' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-hello-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/integration/themes/hello-elementor/assets/css/style.css?ver=1724486282' media='all' /><link rel='stylesheet' id='sweetalert2-css' href='https://codefor.tech/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-general-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-smallscreen-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=1724486282' media='only screen and (max-width: 768px)' /><link data-minify="1" rel='stylesheet' id='user-registration-my-account-layout-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='dashicons-css' href='https://codefor.tech/wp-content/cache/min/1/wp-includes/css/dashicons.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='hello-elementor-css' href='https://codefor.tech/wp-content/themes/hello-elementor/style.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://codefor.tech/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://codefor.tech/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.21.8' media='all' /><link rel='stylesheet' id='elementor-post-6-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-6.css?ver=1718118435' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-all-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/all.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='font-awesome-v4-shims-css' href='https://codefor.tech/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/v4-shims.min.css?ver=5.12.0' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-public-styles-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/css/public.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='swiper-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.21.3' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://codefor.tech/wp-content/uploads/elementor/css/global.css?ver=1718118436' media='all' /><link rel='stylesheet' id='elementor-post-1948-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-1948.css?ver=1722992488' media='all' /><link rel='stylesheet' id='elementor-post-8-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-8.css?ver=1719760051' media='all' /><link rel='stylesheet' id='elementor-post-42-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-42.css?ver=1718469014' media='all' /><link rel='stylesheet' id='jquery-chosen-css' href='https://codefor.tech/wp-content/plugins/jet-search/assets/lib/chosen/chosen.min.css?ver=1.8.7' media='all' /><link data-minify="1" rel='stylesheet' id='jet-search-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-search/assets/css/jet-search.css?ver=1724486282' media='all' /><link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap&#038;subset=cyrillic&#038;ver=6.6.2' media='all' /><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/widget-theme-elements.min.css"><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css"><link rel='stylesheet' id='elementor-post-416-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-416.css?ver=1724268811' media='all' /><link rel='stylesheet' id='elementor-post-471-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-471.css?ver=1722847712' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' media='' /><link data-minify="1" rel='stylesheet' id='mailpoet_public-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/mailpoet/assets/dist/css/mailpoet-public.c7ad0042.css?ver=1724486282' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_0-css' href='https://fonts.googleapis.com/css?family=Abril+FatFace%3A400%2C400i%2C700%2C700i%7CAlegreya%3A400%2C400i%2C700%2C700i%7CAlegreya+Sans%3A400%2C400i%2C700%2C700i%7CAmatic+SC%3A400%2C400i%2C700%2C700i%7CAnonymous+Pro%3A400%2C400i%2C700%2C700i%7CArchitects+Daughter%3A400%2C400i%2C700%2C700i%7CArchivo%3A400%2C400i%2C700%2C700i%7CArchivo+Narrow%3A400%2C400i%2C700%2C700i%7CAsap%3A400%2C400i%2C700%2C700i%7CBarlow%3A400%2C400i%2C700%2C700i%7CBioRhyme%3A400%2C400i%2C700%2C700i%7CBonbon%3A400%2C400i%2C700%2C700i%7CCabin%3A400%2C400i%2C700%2C700i%7CCairo%3A400%2C400i%2C700%2C700i%7CCardo%3A400%2C400i%2C700%2C700i%7CChivo%3A400%2C400i%2C700%2C700i%7CConcert+One%3A400%2C400i%2C700%2C700i%7CCormorant%3A400%2C400i%2C700%2C700i%7CCrimson+Text%3A400%2C400i%2C700%2C700i%7CEczar%3A400%2C400i%2C700%2C700i%7CExo+2%3A400%2C400i%2C700%2C700i%7CFira+Sans%3A400%2C400i%2C700%2C700i%7CFjalla+One%3A400%2C400i%2C700%2C700i%7CFrank+Ruhl+Libre%3A400%2C400i%2C700%2C700i%7CGreat+Vibes%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_1-css' href='https://fonts.googleapis.com/css?family=Heebo%3A400%2C400i%2C700%2C700i%7CIBM+Plex%3A400%2C400i%2C700%2C700i%7CInconsolata%3A400%2C400i%2C700%2C700i%7CIndie+Flower%3A400%2C400i%2C700%2C700i%7CInknut+Antiqua%3A400%2C400i%2C700%2C700i%7CInter%3A400%2C400i%2C700%2C700i%7CKarla%3A400%2C400i%2C700%2C700i%7CLibre+Baskerville%3A400%2C400i%2C700%2C700i%7CLibre+Franklin%3A400%2C400i%2C700%2C700i%7CMontserrat%3A400%2C400i%2C700%2C700i%7CNeuton%3A400%2C400i%2C700%2C700i%7CNotable%3A400%2C400i%2C700%2C700i%7CNothing+You+Could+Do%3A400%2C400i%2C700%2C700i%7CNoto+Sans%3A400%2C400i%2C700%2C700i%7CNunito%3A400%2C400i%2C700%2C700i%7COld+Standard+TT%3A400%2C400i%2C700%2C700i%7COxygen%3A400%2C400i%2C700%2C700i%7CPacifico%3A400%2C400i%2C700%2C700i%7CPoppins%3A400%2C400i%2C700%2C700i%7CProza+Libre%3A400%2C400i%2C700%2C700i%7CPT+Sans%3A400%2C400i%2C700%2C700i%7CPT+Serif%3A400%2C400i%2C700%2C700i%7CRakkas%3A400%2C400i%2C700%2C700i%7CReenie+Beanie%3A400%2C400i%2C700%2C700i%7CRoboto+Slab%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_2-css' href='https://fonts.googleapis.com/css?family=Ropa+Sans%3A400%2C400i%2C700%2C700i%7CRubik%3A400%2C400i%2C700%2C700i%7CShadows+Into+Light%3A400%2C400i%2C700%2C700i%7CSpace+Mono%3A400%2C400i%2C700%2C700i%7CSpectral%3A400%2C400i%2C700%2C700i%7CSue+Ellen+Francisco%3A400%2C400i%2C700%2C700i%7CTitillium+Web%3A400%2C400i%2C700%2C700i%7CUbuntu%3A400%2C400i%2C700%2C700i%7CVarela%3A400%2C400i%2C700%2C700i%7CVollkorn%3A400%2C400i%2C700%2C700i%7CWork+Sans%3A400%2C400i%2C700%2C700i%7CYatra+One%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='elementor-post-487-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-487.css?ver=1719159596' media='all' /><link rel='stylesheet' id='elementor-post-497-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-497.css?ver=1724485504' media='all' /><link rel='stylesheet' id='elementor-post-503-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-503.css?ver=1718466482' media='all' /><link rel='stylesheet' id='elementor-post-329-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-329.css?ver=1718467092' media='all' /></noscript></body>
</html>

Пример 3: flex-wrap: wrap-reverse

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap-reverse;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #ffa07a;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Элемент 1</div>
        <div class="item">Элемент 2</div>
        <div class="item">Элемент 3</div>
        <div class="item">Элемент 4</div>
    </div>
<noscript><link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://codefor.tech/wp-content/themes/hello-elementor/theme.min.css?ver=3.0.2' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-hello-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/integration/themes/hello-elementor/assets/css/style.css?ver=1724486282' media='all' /><link rel='stylesheet' id='sweetalert2-css' href='https://codefor.tech/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-general-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-smallscreen-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=1724486282' media='only screen and (max-width: 768px)' /><link data-minify="1" rel='stylesheet' id='user-registration-my-account-layout-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='dashicons-css' href='https://codefor.tech/wp-content/cache/min/1/wp-includes/css/dashicons.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='hello-elementor-css' href='https://codefor.tech/wp-content/themes/hello-elementor/style.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://codefor.tech/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://codefor.tech/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.21.8' media='all' /><link rel='stylesheet' id='elementor-post-6-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-6.css?ver=1718118435' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-all-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/all.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='font-awesome-v4-shims-css' href='https://codefor.tech/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/v4-shims.min.css?ver=5.12.0' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-public-styles-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/css/public.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='swiper-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.21.3' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://codefor.tech/wp-content/uploads/elementor/css/global.css?ver=1718118436' media='all' /><link rel='stylesheet' id='elementor-post-1948-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-1948.css?ver=1722992488' media='all' /><link rel='stylesheet' id='elementor-post-8-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-8.css?ver=1719760051' media='all' /><link rel='stylesheet' id='elementor-post-42-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-42.css?ver=1718469014' media='all' /><link rel='stylesheet' id='jquery-chosen-css' href='https://codefor.tech/wp-content/plugins/jet-search/assets/lib/chosen/chosen.min.css?ver=1.8.7' media='all' /><link data-minify="1" rel='stylesheet' id='jet-search-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-search/assets/css/jet-search.css?ver=1724486282' media='all' /><link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap&#038;subset=cyrillic&#038;ver=6.6.2' media='all' /><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/widget-theme-elements.min.css"><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css"><link rel='stylesheet' id='elementor-post-416-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-416.css?ver=1724268811' media='all' /><link rel='stylesheet' id='elementor-post-471-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-471.css?ver=1722847712' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' media='' /><link data-minify="1" rel='stylesheet' id='mailpoet_public-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/mailpoet/assets/dist/css/mailpoet-public.c7ad0042.css?ver=1724486282' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_0-css' href='https://fonts.googleapis.com/css?family=Abril+FatFace%3A400%2C400i%2C700%2C700i%7CAlegreya%3A400%2C400i%2C700%2C700i%7CAlegreya+Sans%3A400%2C400i%2C700%2C700i%7CAmatic+SC%3A400%2C400i%2C700%2C700i%7CAnonymous+Pro%3A400%2C400i%2C700%2C700i%7CArchitects+Daughter%3A400%2C400i%2C700%2C700i%7CArchivo%3A400%2C400i%2C700%2C700i%7CArchivo+Narrow%3A400%2C400i%2C700%2C700i%7CAsap%3A400%2C400i%2C700%2C700i%7CBarlow%3A400%2C400i%2C700%2C700i%7CBioRhyme%3A400%2C400i%2C700%2C700i%7CBonbon%3A400%2C400i%2C700%2C700i%7CCabin%3A400%2C400i%2C700%2C700i%7CCairo%3A400%2C400i%2C700%2C700i%7CCardo%3A400%2C400i%2C700%2C700i%7CChivo%3A400%2C400i%2C700%2C700i%7CConcert+One%3A400%2C400i%2C700%2C700i%7CCormorant%3A400%2C400i%2C700%2C700i%7CCrimson+Text%3A400%2C400i%2C700%2C700i%7CEczar%3A400%2C400i%2C700%2C700i%7CExo+2%3A400%2C400i%2C700%2C700i%7CFira+Sans%3A400%2C400i%2C700%2C700i%7CFjalla+One%3A400%2C400i%2C700%2C700i%7CFrank+Ruhl+Libre%3A400%2C400i%2C700%2C700i%7CGreat+Vibes%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_1-css' href='https://fonts.googleapis.com/css?family=Heebo%3A400%2C400i%2C700%2C700i%7CIBM+Plex%3A400%2C400i%2C700%2C700i%7CInconsolata%3A400%2C400i%2C700%2C700i%7CIndie+Flower%3A400%2C400i%2C700%2C700i%7CInknut+Antiqua%3A400%2C400i%2C700%2C700i%7CInter%3A400%2C400i%2C700%2C700i%7CKarla%3A400%2C400i%2C700%2C700i%7CLibre+Baskerville%3A400%2C400i%2C700%2C700i%7CLibre+Franklin%3A400%2C400i%2C700%2C700i%7CMontserrat%3A400%2C400i%2C700%2C700i%7CNeuton%3A400%2C400i%2C700%2C700i%7CNotable%3A400%2C400i%2C700%2C700i%7CNothing+You+Could+Do%3A400%2C400i%2C700%2C700i%7CNoto+Sans%3A400%2C400i%2C700%2C700i%7CNunito%3A400%2C400i%2C700%2C700i%7COld+Standard+TT%3A400%2C400i%2C700%2C700i%7COxygen%3A400%2C400i%2C700%2C700i%7CPacifico%3A400%2C400i%2C700%2C700i%7CPoppins%3A400%2C400i%2C700%2C700i%7CProza+Libre%3A400%2C400i%2C700%2C700i%7CPT+Sans%3A400%2C400i%2C700%2C700i%7CPT+Serif%3A400%2C400i%2C700%2C700i%7CRakkas%3A400%2C400i%2C700%2C700i%7CReenie+Beanie%3A400%2C400i%2C700%2C700i%7CRoboto+Slab%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_2-css' href='https://fonts.googleapis.com/css?family=Ropa+Sans%3A400%2C400i%2C700%2C700i%7CRubik%3A400%2C400i%2C700%2C700i%7CShadows+Into+Light%3A400%2C400i%2C700%2C700i%7CSpace+Mono%3A400%2C400i%2C700%2C700i%7CSpectral%3A400%2C400i%2C700%2C700i%7CSue+Ellen+Francisco%3A400%2C400i%2C700%2C700i%7CTitillium+Web%3A400%2C400i%2C700%2C700i%7CUbuntu%3A400%2C400i%2C700%2C700i%7CVarela%3A400%2C400i%2C700%2C700i%7CVollkorn%3A400%2C400i%2C700%2C700i%7CWork+Sans%3A400%2C400i%2C700%2C700i%7CYatra+One%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='elementor-post-487-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-487.css?ver=1719159596' media='all' /><link rel='stylesheet' id='elementor-post-497-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-497.css?ver=1724485504' media='all' /><link rel='stylesheet' id='elementor-post-503-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-503.css?ver=1718466482' media='all' /><link rel='stylesheet' id='elementor-post-329-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-329.css?ver=1718467092' media='all' /></noscript></body>
</html>

Комбинирование `flex-wrap` с `flex-direction`

Свойства flex-wrap и flex-direction могут комбинироваться для создания различных макетов. Свойство flex-flow является сокращённой записью для комбинации этих двух свойств.

Пример 4: flex-flow

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-flow: row wrap;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Элемент 1</div>
        <div class="item">Элемент 2</div>
        <div class="item">Элемент 3</div>
        <div class="item">Элемент 4</div>
        <div class="item">Элемент 5</div>
        <div class="item">Элемент 6</div>
    </div>
<noscript><link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://codefor.tech/wp-content/themes/hello-elementor/theme.min.css?ver=3.0.2' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-hello-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/integration/themes/hello-elementor/assets/css/style.css?ver=1724486282' media='all' /><link rel='stylesheet' id='sweetalert2-css' href='https://codefor.tech/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-general-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-smallscreen-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=1724486282' media='only screen and (max-width: 768px)' /><link data-minify="1" rel='stylesheet' id='user-registration-my-account-layout-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='dashicons-css' href='https://codefor.tech/wp-content/cache/min/1/wp-includes/css/dashicons.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='hello-elementor-css' href='https://codefor.tech/wp-content/themes/hello-elementor/style.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://codefor.tech/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://codefor.tech/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.21.8' media='all' /><link rel='stylesheet' id='elementor-post-6-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-6.css?ver=1718118435' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-all-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/all.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='font-awesome-v4-shims-css' href='https://codefor.tech/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/v4-shims.min.css?ver=5.12.0' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-public-styles-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/css/public.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='swiper-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.21.3' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://codefor.tech/wp-content/uploads/elementor/css/global.css?ver=1718118436' media='all' /><link rel='stylesheet' id='elementor-post-1948-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-1948.css?ver=1722992488' media='all' /><link rel='stylesheet' id='elementor-post-8-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-8.css?ver=1719760051' media='all' /><link rel='stylesheet' id='elementor-post-42-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-42.css?ver=1718469014' media='all' /><link rel='stylesheet' id='jquery-chosen-css' href='https://codefor.tech/wp-content/plugins/jet-search/assets/lib/chosen/chosen.min.css?ver=1.8.7' media='all' /><link data-minify="1" rel='stylesheet' id='jet-search-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-search/assets/css/jet-search.css?ver=1724486282' media='all' /><link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap&#038;subset=cyrillic&#038;ver=6.6.2' media='all' /><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/widget-theme-elements.min.css"><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css"><link rel='stylesheet' id='elementor-post-416-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-416.css?ver=1724268811' media='all' /><link rel='stylesheet' id='elementor-post-471-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-471.css?ver=1722847712' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' media='' /><link data-minify="1" rel='stylesheet' id='mailpoet_public-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/mailpoet/assets/dist/css/mailpoet-public.c7ad0042.css?ver=1724486282' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_0-css' href='https://fonts.googleapis.com/css?family=Abril+FatFace%3A400%2C400i%2C700%2C700i%7CAlegreya%3A400%2C400i%2C700%2C700i%7CAlegreya+Sans%3A400%2C400i%2C700%2C700i%7CAmatic+SC%3A400%2C400i%2C700%2C700i%7CAnonymous+Pro%3A400%2C400i%2C700%2C700i%7CArchitects+Daughter%3A400%2C400i%2C700%2C700i%7CArchivo%3A400%2C400i%2C700%2C700i%7CArchivo+Narrow%3A400%2C400i%2C700%2C700i%7CAsap%3A400%2C400i%2C700%2C700i%7CBarlow%3A400%2C400i%2C700%2C700i%7CBioRhyme%3A400%2C400i%2C700%2C700i%7CBonbon%3A400%2C400i%2C700%2C700i%7CCabin%3A400%2C400i%2C700%2C700i%7CCairo%3A400%2C400i%2C700%2C700i%7CCardo%3A400%2C400i%2C700%2C700i%7CChivo%3A400%2C400i%2C700%2C700i%7CConcert+One%3A400%2C400i%2C700%2C700i%7CCormorant%3A400%2C400i%2C700%2C700i%7CCrimson+Text%3A400%2C400i%2C700%2C700i%7CEczar%3A400%2C400i%2C700%2C700i%7CExo+2%3A400%2C400i%2C700%2C700i%7CFira+Sans%3A400%2C400i%2C700%2C700i%7CFjalla+One%3A400%2C400i%2C700%2C700i%7CFrank+Ruhl+Libre%3A400%2C400i%2C700%2C700i%7CGreat+Vibes%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_1-css' href='https://fonts.googleapis.com/css?family=Heebo%3A400%2C400i%2C700%2C700i%7CIBM+Plex%3A400%2C400i%2C700%2C700i%7CInconsolata%3A400%2C400i%2C700%2C700i%7CIndie+Flower%3A400%2C400i%2C700%2C700i%7CInknut+Antiqua%3A400%2C400i%2C700%2C700i%7CInter%3A400%2C400i%2C700%2C700i%7CKarla%3A400%2C400i%2C700%2C700i%7CLibre+Baskerville%3A400%2C400i%2C700%2C700i%7CLibre+Franklin%3A400%2C400i%2C700%2C700i%7CMontserrat%3A400%2C400i%2C700%2C700i%7CNeuton%3A400%2C400i%2C700%2C700i%7CNotable%3A400%2C400i%2C700%2C700i%7CNothing+You+Could+Do%3A400%2C400i%2C700%2C700i%7CNoto+Sans%3A400%2C400i%2C700%2C700i%7CNunito%3A400%2C400i%2C700%2C700i%7COld+Standard+TT%3A400%2C400i%2C700%2C700i%7COxygen%3A400%2C400i%2C700%2C700i%7CPacifico%3A400%2C400i%2C700%2C700i%7CPoppins%3A400%2C400i%2C700%2C700i%7CProza+Libre%3A400%2C400i%2C700%2C700i%7CPT+Sans%3A400%2C400i%2C700%2C700i%7CPT+Serif%3A400%2C400i%2C700%2C700i%7CRakkas%3A400%2C400i%2C700%2C700i%7CReenie+Beanie%3A400%2C400i%2C700%2C700i%7CRoboto+Slab%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_2-css' href='https://fonts.googleapis.com/css?family=Ropa+Sans%3A400%2C400i%2C700%2C700i%7CRubik%3A400%2C400i%2C700%2C700i%7CShadows+Into+Light%3A400%2C400i%2C700%2C700i%7CSpace+Mono%3A400%2C400i%2C700%2C700i%7CSpectral%3A400%2C400i%2C700%2C700i%7CSue+Ellen+Francisco%3A400%2C400i%2C700%2C700i%7CTitillium+Web%3A400%2C400i%2C700%2C700i%7CUbuntu%3A400%2C400i%2C700%2C700i%7CVarela%3A400%2C400i%2C700%2C700i%7CVollkorn%3A400%2C400i%2C700%2C700i%7CWork+Sans%3A400%2C400i%2C700%2C700i%7CYatra+One%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='elementor-post-487-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-487.css?ver=1719159596' media='all' /><link rel='stylesheet' id='elementor-post-497-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-497.css?ver=1724485504' media='all' /><link rel='stylesheet' id='elementor-post-503-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-503.css?ver=1718466482' media='all' /><link rel='stylesheet' id='elementor-post-329-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-329.css?ver=1718467092' media='all' /></noscript></body>
</html>

Распространённые ошибки

Игнорирование свойства flex-wrap: Если не задать это свойство, flex-элементы не будут переноситься, что может привести к переполнению контейнера и нарушению макета.
Неправильное понимание wrap-reverse: При использовании wrap-reverse элементы располагаются в обратном порядке, что может привести к неожиданным результатам.
Неправильное комбинирование flex-direction и flex-wrap: Убедитесь, что понимаете, как эти два свойства работают вместе, чтобы избежать нежелательных изменений в макете.

Заключение

Свойство flex-wrap позволяет управлять переносом flex-элементов внутри контейнера, делая макет более гибким и адаптивным. Понимание и правильное использование этого свойства позволяет создавать более устойчивые и предсказуемые макеты, которые адаптируются к различным размерам экрана и устройствам.

Тестовое задание

Создайте HTML-документ с контейнером, который использует flex-контейнер для выравнивания элементов.
Примените различные значения для свойства flex-wrap (nowrap, wrap, wrap-reverse).
Скомбинируйте flex-wrap с различными значениями свойства flex-direction и наблюдайте за их влиянием на расположение элементов.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .item {
            background-color: #add8e6;
            border: 1px solid #000;
            padding: 20px;
            margin: 10px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Элемент 1</div>
        <div class="item">Элемент 2</div>
        <div class="item">Элемент 3</div>
        <div class="item">Элемент 4</div>
        <div class="item">Элемент 5</div>
        <div class="item">Элемент 6</div>
    </div>
<noscript><link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://codefor.tech/wp-content/themes/hello-elementor/theme.min.css?ver=3.0.2' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-hello-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/integration/themes/hello-elementor/assets/css/style.css?ver=1724486282' media='all' /><link rel='stylesheet' id='sweetalert2-css' href='https://codefor.tech/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-general-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='user-registration-smallscreen-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=1724486282' media='only screen and (max-width: 768px)' /><link data-minify="1" rel='stylesheet' id='user-registration-my-account-layout-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='dashicons-css' href='https://codefor.tech/wp-content/cache/min/1/wp-includes/css/dashicons.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='hello-elementor-css' href='https://codefor.tech/wp-content/themes/hello-elementor/style.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://codefor.tech/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.0.2' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://codefor.tech/wp-content/plugins/elementor/assets/css/frontend-lite.min.css?ver=3.21.8' media='all' /><link rel='stylesheet' id='elementor-post-6-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-6.css?ver=1718118435' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-all-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/all.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='font-awesome-v4-shims-css' href='https://codefor.tech/wp-content/plugins/jet-menu/assets/public/lib/font-awesome/css/v4-shims.min.css?ver=5.12.0' media='all' /><link data-minify="1" rel='stylesheet' id='jet-menu-public-styles-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-menu/assets/public/css/public.css?ver=1724486282' media='all' /><link data-minify="1" rel='stylesheet' id='swiper-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1724486282' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/frontend-lite.min.css?ver=3.21.3' media='all' /><link rel='stylesheet' id='elementor-global-css' href='https://codefor.tech/wp-content/uploads/elementor/css/global.css?ver=1718118436' media='all' /><link rel='stylesheet' id='elementor-post-1948-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-1948.css?ver=1722992488' media='all' /><link rel='stylesheet' id='elementor-post-8-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-8.css?ver=1719760051' media='all' /><link rel='stylesheet' id='elementor-post-42-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-42.css?ver=1718469014' media='all' /><link rel='stylesheet' id='jquery-chosen-css' href='https://codefor.tech/wp-content/plugins/jet-search/assets/lib/chosen/chosen.min.css?ver=1.8.7' media='all' /><link data-minify="1" rel='stylesheet' id='jet-search-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/jet-search/assets/css/jet-search.css?ver=1724486282' media='all' /><link rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap&#038;subset=cyrillic&#038;ver=6.6.2' media='all' /><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/widget-theme-elements.min.css"><link rel="stylesheet" href="https://codefor.tech/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css"><link rel='stylesheet' id='elementor-post-416-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-416.css?ver=1724268811' media='all' /><link rel='stylesheet' id='elementor-post-471-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-471.css?ver=1722847712' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://codefor.tech/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' media='' /><link data-minify="1" rel='stylesheet' id='mailpoet_public-css' href='https://codefor.tech/wp-content/cache/min/1/wp-content/plugins/mailpoet/assets/dist/css/mailpoet-public.c7ad0042.css?ver=1724486282' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_0-css' href='https://fonts.googleapis.com/css?family=Abril+FatFace%3A400%2C400i%2C700%2C700i%7CAlegreya%3A400%2C400i%2C700%2C700i%7CAlegreya+Sans%3A400%2C400i%2C700%2C700i%7CAmatic+SC%3A400%2C400i%2C700%2C700i%7CAnonymous+Pro%3A400%2C400i%2C700%2C700i%7CArchitects+Daughter%3A400%2C400i%2C700%2C700i%7CArchivo%3A400%2C400i%2C700%2C700i%7CArchivo+Narrow%3A400%2C400i%2C700%2C700i%7CAsap%3A400%2C400i%2C700%2C700i%7CBarlow%3A400%2C400i%2C700%2C700i%7CBioRhyme%3A400%2C400i%2C700%2C700i%7CBonbon%3A400%2C400i%2C700%2C700i%7CCabin%3A400%2C400i%2C700%2C700i%7CCairo%3A400%2C400i%2C700%2C700i%7CCardo%3A400%2C400i%2C700%2C700i%7CChivo%3A400%2C400i%2C700%2C700i%7CConcert+One%3A400%2C400i%2C700%2C700i%7CCormorant%3A400%2C400i%2C700%2C700i%7CCrimson+Text%3A400%2C400i%2C700%2C700i%7CEczar%3A400%2C400i%2C700%2C700i%7CExo+2%3A400%2C400i%2C700%2C700i%7CFira+Sans%3A400%2C400i%2C700%2C700i%7CFjalla+One%3A400%2C400i%2C700%2C700i%7CFrank+Ruhl+Libre%3A400%2C400i%2C700%2C700i%7CGreat+Vibes%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_1-css' href='https://fonts.googleapis.com/css?family=Heebo%3A400%2C400i%2C700%2C700i%7CIBM+Plex%3A400%2C400i%2C700%2C700i%7CInconsolata%3A400%2C400i%2C700%2C700i%7CIndie+Flower%3A400%2C400i%2C700%2C700i%7CInknut+Antiqua%3A400%2C400i%2C700%2C700i%7CInter%3A400%2C400i%2C700%2C700i%7CKarla%3A400%2C400i%2C700%2C700i%7CLibre+Baskerville%3A400%2C400i%2C700%2C700i%7CLibre+Franklin%3A400%2C400i%2C700%2C700i%7CMontserrat%3A400%2C400i%2C700%2C700i%7CNeuton%3A400%2C400i%2C700%2C700i%7CNotable%3A400%2C400i%2C700%2C700i%7CNothing+You+Could+Do%3A400%2C400i%2C700%2C700i%7CNoto+Sans%3A400%2C400i%2C700%2C700i%7CNunito%3A400%2C400i%2C700%2C700i%7COld+Standard+TT%3A400%2C400i%2C700%2C700i%7COxygen%3A400%2C400i%2C700%2C700i%7CPacifico%3A400%2C400i%2C700%2C700i%7CPoppins%3A400%2C400i%2C700%2C700i%7CProza+Libre%3A400%2C400i%2C700%2C700i%7CPT+Sans%3A400%2C400i%2C700%2C700i%7CPT+Serif%3A400%2C400i%2C700%2C700i%7CRakkas%3A400%2C400i%2C700%2C700i%7CReenie+Beanie%3A400%2C400i%2C700%2C700i%7CRoboto+Slab%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='mailpoet_custom_fonts_2-css' href='https://fonts.googleapis.com/css?family=Ropa+Sans%3A400%2C400i%2C700%2C700i%7CRubik%3A400%2C400i%2C700%2C700i%7CShadows+Into+Light%3A400%2C400i%2C700%2C700i%7CSpace+Mono%3A400%2C400i%2C700%2C700i%7CSpectral%3A400%2C400i%2C700%2C700i%7CSue+Ellen+Francisco%3A400%2C400i%2C700%2C700i%7CTitillium+Web%3A400%2C400i%2C700%2C700i%7CUbuntu%3A400%2C400i%2C700%2C700i%7CVarela%3A400%2C400i%2C700%2C700i%7CVollkorn%3A400%2C400i%2C700%2C700i%7CWork+Sans%3A400%2C400i%2C700%2C700i%7CYatra+One%3A400%2C400i%2C700%2C700i&#038;ver=6.6.2' media='all' /><link rel='stylesheet' id='elementor-post-487-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-487.css?ver=1719159596' media='all' /><link rel='stylesheet' id='elementor-post-497-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-497.css?ver=1724485504' media='all' /><link rel='stylesheet' id='elementor-post-503-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-503.css?ver=1718466482' media='all' /><link rel='stylesheet' id='elementor-post-329-css' href='https://codefor.tech/wp-content/uploads/elementor/css/post-329.css?ver=1718467092' media='all' /></noscript></body>
</html>

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

Регистрация

Вход

Поиск

29. Перенос элементов внутри контейнера

Свойство `flex-wrap`

Примеры использования

Комбинирование `flex-wrap` с `flex-direction`

Распространённые ошибки

Заключение

Тестовое задание

Регистрация

Вход

Поиск

29. Перенос элементов внутри контейнера

Свойство flex-wrap

Примеры использования

Комбинирование flex-wrap с flex-direction

Распространённые ошибки

Заключение

Тестовое задание

Свойство `flex-wrap`

Комбинирование `flex-wrap` с `flex-direction`