{"id":3744,"date":"2023-07-18T01:05:20","date_gmt":"2023-07-18T01:05:20","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3744"},"modified":"2023-07-18T01:05:20","modified_gmt":"2023-07-18T01:05:20","slug":"course-notes-flexbox","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-three\/course-notes-flexbox\/","title":{"rendered":"Course Notes: Flexbox"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Introduction to CSS Layout<\/h1>\n\n\n\n<h4 class=\"wp-block-heading\">The&nbsp;<strong>display<\/strong>&nbsp;property<\/h4>\n\n\n\n<p>changes the behavior of a document\u2019s flow of elements<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>display: block<\/code>&nbsp;stacked vertically upon other boxes<\/li>\n\n\n\n<li><code>display: inline<\/code>&nbsp;flows with the document text, allows line breaks<\/li>\n\n\n\n<li><code>display: inline-block<\/code>&nbsp;combination, flows with text but maintains the integrity of a block<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Flexbox (Flexible Box Layout Module)<\/strong><\/h4>\n\n\n\n<p>allows us to easily lay out elements in one dimension, either a row or column<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>display: flex<\/code>&nbsp;apply to the parent div element, the children then become flex items<\/li>\n\n\n\n<li><code>flex-direction: row \/ column<\/code>&nbsp;row to stack them horizontally, column to stack them vertically<\/li>\n\n\n\n<li><code>align-items: stretch<\/code>&nbsp;makes the flex items stretch to the height of the flex container<\/li>\n\n\n\n<li><code>flex:1<\/code>&nbsp;makes the flex items grow and fill the container<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Grid Layout<\/h4>\n\n\n\n<p>allows us to easily lay out elements in two dimensions, in rows and columns<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>display: grid<\/code>&nbsp;apply to the parent div element, the children then become grid items<\/li>\n\n\n\n<li><code>grid-column \/ grid-row&nbsp;<\/code>unit less value that determines the start and end line of each item<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Floats<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>float: left<\/code>&nbsp;element floats left<\/li>\n\n\n\n<li><code>float: right<\/code>&nbsp;element floats left<\/li>\n\n\n\n<li><code>float: none<\/code>&nbsp;no float specified, default<\/li>\n\n\n\n<li><code>float: inherit<\/code>&nbsp;the value of the float property is inherited from the parent element<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Positioning<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>position: static normal positioning, default that is applied to every element<\/code><\/li>\n\n\n\n<li><code>position: relative<\/code>&nbsp;relative to its position in normal flow, allows for the modification of the element\u2019s position<\/li>\n\n\n\n<li><code>position: absolute<\/code>&nbsp;removes an element from a page\u2019s normal flow, element becomes its own separate layer, can be fixed to a container or the edges of the pages &lt;html&gt; element<\/li>\n\n\n\n<li><code>position: fixed<\/code>&nbsp;removes an element from a page\u2019s normal flow, fixes an element relative to the browser viewport, where the element stays in place while the rest of the document scrolls (good for navigation menus)<\/li>\n\n\n\n<li><code>position: sticky<\/code>&nbsp;newer method, combines static &amp; fixed, will act static and go with the normal flow until it reaches a defined offset point where it begins to act fixed while the rest of the page scrolls<\/li>\n\n\n\n<li><code>{position: (static \/ relative \/ absolute \/ fixed \/ sticky);&nbsp;<\/code><code>top: _px; left:&nbsp; _px}<\/code><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Normal Flow<\/h1>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Normal flow<\/strong><\/h4>\n\n\n\n<p>how a browser lays out an HTML page by default when there\u2019s nothing controlling its layout or formatting.<\/p>\n\n\n\n<p>The content is rendered in the same vertical stack as your code is stacked with elements. The direction that the elements are stacked is determined by the writing mode (English- horizontal, top to bottom)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Defaults of normal flow:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block elements width: the width of its parent element and height= depends on the length of the content, both can be specified<\/li>\n\n\n\n<li>Inline elements width\/height: flows with the text, cannot be controlled<\/li>\n\n\n\n<li>Inline-block elements: flows with the text with a width and height that can be manipulated like a block element<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Flexbox<\/h1>\n\n\n\n<p><strong>Flexbox<\/strong>&nbsp;a one-dimensional layout method using rows &amp; columns, the only reliable cross-browser tool available to make CSS layouts<\/p>\n\n\n\n<p><strong>Flex container<\/strong>: the parent element with the CSS&nbsp;<em>display: flex<\/em><em>&nbsp;<\/em><\/p>\n\n\n\n<p><strong>Flex items<\/strong>: the children elements within a flex container<\/p>\n\n\n\n<p><em>Nest<\/em>&nbsp;flex boxes by creating a flex item container elements within a flex item<\/p>\n\n\n\n<p><strong>Main axis<\/strong>: running in the direction of the layout (English- horizontal), the edges of the flex container or flex item that determine the height are called the main start and the main end<\/p>\n\n\n\n<p><strong>Cross axis<\/strong>: running perpendicular to the direction of the layout (English- vertical), the edges of the flex container or flex item that determine the width are called the cross start and the cross end<\/p>\n\n\n\n<p><code>flex-direction: row \/column \/ row-reverse;<\/code>&nbsp;property that specifies the layout direction of the flex items<\/p>\n\n\n\n<p><code>flex-wrap: wrap;<\/code>&nbsp;moves the flex items that overflow the edges of the flex container to the next line<\/p>\n\n\n\n<p><code>flex-flow: row \/ column;<\/code>&nbsp;shorthand that replaces flex-direction &amp; flex-wrap<\/p>\n\n\n\n<p><code>flex: 1;<\/code>&nbsp;unit less proportion that determines how much of the available space each item will take up on either side of the main axis, the value 1 gives an equal amount to each box<\/p>\n\n\n\n<p>Advanced flex properties to look at:&nbsp;<code>flex-grow<\/code>,&nbsp;<code>flex-shrink<\/code>,&nbsp;<code>flex-basis<\/code>.&nbsp;Flex is shorthand while these are longhand and will require a great amount of extra code to be written but gives you greater detail precision.<\/p>\n\n\n\n<p><code>align-items<\/code>: sets the alignment of an element within its parent element, controlling the align-self value of all children elements of the group<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>align-items: center \/ start \/ end \/ flex-start \/ flex-end<\/code><\/li>\n\n\n\n<li>align-self: sets the individual element\u2019s alignment, overruling align-items<\/li>\n\n\n\n<li>justify-content: controls where the flex items sit on the main axis\n<ul class=\"wp-block-list\">\n<li><code>justify-content: space around;<\/code>&nbsp;distributes the boxes evenly along the main axis with some padding on either end<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Final note* Compatibility: flexbox is supported across most browsers (Firefox, Chrome, Edge, IE 11, new versions of iOS\/Android, etc) but not all, so if you\u2019re building a serious website make sure to test your code in order to ensure your user\u2019s experience is acceptable across as many browsers as possible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to CSS Layout The&nbsp;display&nbsp;property changes the behavior of a document\u2019s flow of elements Flexbox (Flexible Box Layout Module) allows us to easily lay out elements in one dimension, either a row or column Grid Layout allows us to easily lay out elements in two dimensions, in rows and columns Floats Positioning Normal Flow Normal &hellip; <a href=\"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-three\/course-notes-flexbox\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Course Notes: Flexbox<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3688,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3744","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3744"}],"version-history":[{"count":1,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3744\/revisions"}],"predecessor-version":[{"id":3745,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3744\/revisions\/3745"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3688"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}