diff options
Diffstat (limited to 'files/my/learn/css')
| -rw-r--r-- | files/my/learn/css/css_layout/flexbox/index.html | 339 | ||||
| -rw-r--r-- | files/my/learn/css/css_layout/index.html | 88 | ||||
| -rw-r--r-- | files/my/learn/css/index.html | 67 |
3 files changed, 0 insertions, 494 deletions
diff --git a/files/my/learn/css/css_layout/flexbox/index.html b/files/my/learn/css/css_layout/flexbox/index.html deleted file mode 100644 index 03bc087105..0000000000 --- a/files/my/learn/css/css_layout/flexbox/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Flexbox -slug: Learn/CSS/CSS_layout/Flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("LearnSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> - -<p class="summary"><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn how to use the Flexbox layout system to create web layouts.</td> - </tr> - </tbody> -</table> - -<h2 id="Why_Flexbox">Why Flexbox?</h2> - -<p>For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>. These are fine and they work, but in some ways they are also rather limiting and frustrating.</p> - -<p>The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:</p> - -<ul> - <li>Vertically centering a block of content inside its parent.</li> - <li>Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.</li> - <li>Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content.</li> -</ul> - -<p>As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!</p> - -<h2 id="Introducing_a_simple_example">Introducing a simple example</h2> - -<p>In this article we are going to get you to work through a series of exercises to help you understand how flexbox works. To get started, you should make a local copy of the first starter file — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> from our github repo — load it in a modern browser (like Firefox or Chrome), and have a look at the code in your code editor. You can <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">see it live here</a> also.</p> - -<p>You'll see that we have a {{htmlelement("header")}} element with a top level heading inside it, and a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. We are going to use these to create a fairly standard three column layout.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> - -<h2 id="Specifying_what_elements_to_lay_out_as_flexible_boxes">Specifying what elements to lay out as flexible boxes</h2> - -<p>To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of {{cssxref("display")}} on the parent element of the elements you want to affect. In this case we want to lay out the {{htmlelement("article")}} elements, so we set this on the {{htmlelement("section")}}:</p> - -<pre class="brush: css notranslate">section { - display: flex; -}</pre> - -<p>This causes the <section> element to become a <strong>flex container</strong>, and its children to become <strong>flex items</strong>. The result of this should be something like so:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> - -<p>So, this single declaration gives us everything we need — incredible, right? We have our multiple column layout with equal sized columns, and the columns are all the same height. This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this.</p> - -<p>To be clear, let's reiterate what is happening here. The element we've given a {{cssxref("display")}} value of <code>flex</code> to is acting like a block-level element in terms of how it interacts with the rest of the page, but its children are being laid out as flex items — the next section will explain in more detail what this means. Note also that you can use a <code>display</code> value of <code>inline-flex</code> if you wish to lay out an element's children as flex items, but have that element behave like an inline element.</p> - -<h2 id="The_flex_model">The flex model</h2> - -<p>When elements are laid out as flex items, they are laid out along two axes:</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> - -<ul> - <li>The <strong>main axis</strong> is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the <strong>main start</strong> and <strong>main end</strong>.</li> - <li>The <strong>cross axis</strong> is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the <strong>cross start</strong> and <strong>cross end</strong>.</li> - <li>The parent element that has <code>display: flex</code> set on it (the {{htmlelement("section")}} in our example) is called the <strong>flex container</strong>.</li> - <li>The items being laid out as flexible boxes inside the flex container are called <strong>flex items</strong> (the {{htmlelement("article")}} elements in our example).</li> -</ul> - -<p>Bear this terminology in mind as you go through subsequent sections. You can always refer back to it if you get confused about any of the terms being used.</p> - -<h2 id="Columns_or_rows">Columns or rows?</h2> - -<p>Flexbox provides a property called {{cssxref("flex-direction")}} that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to <code>row</code>, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an English browser).</p> - -<p>Try adding the following declaration to your {{htmlelement("section")}} rule:</p> - -<pre class="brush: css notranslate">flex-direction: column;</pre> - -<p>You'll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.</p> - -<div class="note"> -<p><strong>Note</strong>: You can also lay out flex items in a reverse direction using the <code>row-reverse</code> and <code>column-reverse</code> values. Experiment with these values too!</p> -</div> - -<h2 id="Wrapping">Wrapping</h2> - -<p>One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> example, and try <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">viewing it live</a> (take a local copy of this file now if you want to follow along with this example):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> - -<p>Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your {{htmlelement("section")}} rule:</p> - -<pre class="brush: css notranslate">flex-wrap: wrap;</pre> - -<p>Also, add the following declaration to your {{htmlelement("article")}} rule:</p> - -<pre class="brush: css notranslate">flex: 200px;</pre> - -<p>Try this now; you'll see that the layout looks much better with this included:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">We now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The <code>flex: 200px</code> declaration set on the articles means that each will be at least 200px wide; we'll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.</p> - -<p>But there's more we can do here. First of all, try changing your {{cssxref("flex-direction")}} property value to <code>row-reverse</code> — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.</p> - -<h2 id="flex-flow_shorthand">flex-flow shorthand</h2> - -<p>At this point it is worth noting that a shorthand exists for {{cssxref("flex-direction")}} and {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. So for example, you can replace</p> - -<pre class="brush: css notranslate">flex-direction: row; -flex-wrap: wrap;</pre> - -<p>with</p> - -<pre class="brush: css notranslate">flex-flow: row wrap;</pre> - -<h2 id="Flexible_sizing_of_flex_items">Flexible sizing of flex items</h2> - -<p>Let's now return to our first example, and look at how we can control what proportion of space flex items take up compared to the other flex items. Fire up your local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, or take a copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> as a new starting point (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">see it live</a>).</p> - -<p>First, add the following rule to the bottom of your CSS:</p> - -<pre class="brush: css notranslate">article { - flex: 1; -}</pre> - -<p>This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up compared to other flex items. In this case, we are giving each {{htmlelement("article")}} element the same value (a value of 1), which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is relative to other flex items, meaning that giving each flex item a value of 400000 would have exactly the same effect.</p> - -<p>Now add the following rule below the previous one:</p> - -<pre class="brush: css notranslate">article:nth-of-type(3) { - flex: 2; -}</pre> - -<p>Now when you refresh, you'll see that the third {{htmlelement("article")}} takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 = 4). The first two flex items have one unit each so they take 1/4 of the available space each. The third one has two units, so it takes up 2/4 of the available space (or one-half).</p> - -<p>You can also specify a minimum size value inside the flex value. Try updating your existing article rules like so:</p> - -<pre class="brush: css notranslate">article { - flex: 1 200px; -} - -article:nth-of-type(3) { - flex: 2 200px; -}</pre> - -<p>This basically states "Each flex item will first be given 200px of the available space. After that, the rest of the available space will be shared out according to the proportion units." Try refreshing and you'll see a difference in how the space is shared out.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> - -<p>The real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser window, or add another {{htmlelement("article")}} element, the layout continues to work just fine.</p> - -<h2 id="flex_shorthand_versus_longhand">flex: shorthand versus longhand</h2> - -<p>{{cssxref("flex")}} is a shorthand property that can specify up to three different values:</p> - -<ul> - <li>The unitless proportion value we discussed above. This can be specified individually using the {{cssxref("flex-grow")}} longhand property.</li> - <li>A second unitless proportion value — {{cssxref("flex-shrink")}} — that comes into play when the flex items are overflowing their container. This specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. This is quite an advanced flexbox feature, and we won't be covering it any further in this article.</li> - <li>The minimum size value we discussed above. This can be specified individually using the {{cssxref("flex-basis")}} longhand value.</li> -</ul> - -<p>We'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). They lead to a lot of extra code being written, and they can be somewhat confusing.</p> - -<h2 id="Horizontal_and_vertical_alignment">Horizontal and vertical alignment</h2> - -<p>You can also use flexbox features to align flex items along the main or cross axis. Let's explore this by looking at a new example — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">see it live also</a>) — which we are going to turn into a neat, flexible button/toolbar. At the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> - -<p>First, take a local copy of this example.</p> - -<p>Now, add the following to the bottom of the example's CSS:</p> - -<pre class="brush: css notranslate">div { - display: flex; - align-items: center; - justify-content: space-around; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p> - -<p>Refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. We've done this via two new properties.</p> - -<p>{{cssxref("align-items")}} controls where the flex items sit on the cross axis.</p> - -<ul> - <li>By default, the value is <code>stretch</code>, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. This is how our first example got equal height columns by default.</li> - <li>The <code>center</code> value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.</li> - <li>You can also have values like <code>flex-start</code> and <code>flex-end</code>, which will align all items at the start and end of the cross axis respectively. See {{cssxref("align-items")}} for the full details.</li> -</ul> - -<p>You can override the {{cssxref("align-items")}} behavior for individual flex items by applying the {{cssxref("align-self")}} property to them. For example, try adding the following to your CSS:</p> - -<pre class="brush: css notranslate">button:first-child { - align-self: flex-end; -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p> - -<p>Have a look at what effect this has, and remove it again when you've finished.</p> - -<p>{{cssxref("justify-content")}} controls where the flex items sit on the main axis.</p> - -<ul> - <li>The default value is <code>flex-start</code>, which makes all the items sit at the start of the main axis.</li> - <li>You can use <code>flex-end</code> to make them sit at the end.</li> - <li><code>center</code> is also a value for <code>justify-content</code>, and will make the flex items sit in the center of the main axis.</li> - <li>The value we've used above, <code>space-around</code>, is useful — it distributes all the items evenly along the main axis, with a bit of space left at either end.</li> - <li>There is another value, <code>space-between</code>, which is very similar to <code>space-around</code> except that it doesn't leave any space at either end.</li> -</ul> - -<p>We'd like to encourage you to play with these values to see how they work before you continue.</p> - -<h2 id="Ordering_flex_items">Ordering flex items</h2> - -<p>Flexbox also has a feature for changing the layout order of flex items, without affecting the source order. This is another thing that is impossible to do with traditional layout methods.</p> - -<p>The code for this is simple: try adding the following CSS to your button bar example code:</p> - -<pre class="brush: css notranslate">button:first-child { - order: 1; -}</pre> - -<p>Refresh, and you'll now see that the "Smile" button has moved to the end of the main axis. Let's talk about how this works in a bit more detail:</p> - -<ul> - <li>By default, all flex items have an {{cssxref("order")}} value of 0.</li> - <li>Flex items with higher order values set on them will appear later in the display order than items with lower order values.</li> - <li>Flex items with the same order value will appear in their source order. So if you have four items with order values of 2, 1, 1, and 0 set on them respectively, their display order would be 4th, 2nd, 3rd, then 1st.</li> - <li>The 3rd item appears after the 2nd because it has the same order value and is after it in the source order.</li> -</ul> - -<p>You can set negative order values to make items appear earlier than items with 0 set. For example, you could make the "Blush" button appear at the start of the main axis using the following rule:</p> - -<pre class="brush: css notranslate">button:last-child { - order: -1; -}</pre> - -<h2 id="Nested_flex_boxes">Nested flex boxes</h2> - -<p>It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes. Have a look at <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">see it live also</a>).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>The HTML for this is fairly simple. We've got a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. The third {{htmlelement("article")}} contains three {{htmlelement("div")}}s. :</p> - -<pre class="notranslate">section - article - article - article - div - button - div button - div button - button - button</pre> - -<p>Let's look at the code we've used for the layout.</p> - -<p>First of all, we set the children of the {{htmlelement("section")}} to be laid out as flexible boxes.</p> - -<pre class="brush: css notranslate">section { - display: flex; -}</pre> - -<p>Next, we set some flex values on the {{htmlelement("article")}}s themselves. Take special note of the 2nd rule here — we are setting the third {{htmlelement("article")}} to have its children laid out like flex items too, but this time we are laying them out like a column.</p> - -<pre class="brush: css notranslate">article { - flex: 1 200px; -} - -article:nth-of-type(3) { - flex: 3 200px; - display: flex; - flex-flow: column; -} -</pre> - -<p>Next, we select the first {{htmlelement("div")}}. We first use <code>flex:1 100px;</code> to effectively give it a minimum height of 100px, then we set its children (the {{htmlelement("button")}} elements) to also be laid out like flex items. Here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier.</p> - -<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { - flex:1 100px; - display: flex; - flex-flow: row wrap; - align-items: center; - justify-content: space-around; -}</pre> - -<p>Finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. This has a very interesting effect, which you'll see if you try resizing your browser window width. The buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.</p> - -<pre class="brush: css notranslate">button { - flex: 1 auto; - margin: 5px; - font-size: 18px; - line-height: 1.5; -}</pre> - -<h2 id="Cross_browser_compatibility">Cross browser compatibility</h2> - -<p>Flexbox support is available in most new browsers — Firefox, Chrome, Opera, Microsoft Edge and IE 11, newer versions of Android/iOS, etc. However you should be aware that there are still older browsers in use that don't support Flexbox (or do, but support a really old, out-of-date version of it.)</p> - -<p>While you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.</p> - -<p>Flexbox is a bit trickier than some CSS features. For example, if a browser is missing a CSS drop shadow, then the site will likely still be usable. Not supporting flexbox features however will probably break a layout completely, making it unusable.</p> - -<p>We discuss strategies for overcoming cross browser support issues in our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a> module.</p> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning. Next we'll have a look at another important aspect of CSS layouts — CSS Grids.</p> - -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> - -<div> -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> -</ul> -</div> diff --git a/files/my/learn/css/css_layout/index.html b/files/my/learn/css/css_layout/index.html deleted file mode 100644 index 0268f74856..0000000000 --- a/files/my/learn/css/css_layout/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - NeedsTranslation - - Positioning - - TopicStub - - alignment - - flexbox - - float - - table -translation_of: Learn/CSS/CSS_layout ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should already:</p> - -<ol> - <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> - <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> - <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> - <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt> - <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> - <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> - <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> - <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> - <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt> - <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt> - <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> - <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> - <dd> - <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> - </dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt> - <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> - <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> -</dl> diff --git a/files/my/learn/css/index.html b/files/my/learn/css/index.html deleted file mode 100644 index 781ea7fb45..0000000000 --- a/files/my/learn/css/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: CSS နင့် HTML အား အသွင်ပောင်းခင်း -slug: Learn/CSS -tags: - - Beginner - - CSS - - CodingScripting - - Debugging - - Landing - - NeedsContent - - NeedsTranslation - - Style - - Topic - - TopicStub - - length - - specificity -translation_of: Learn/CSS ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> - -<h2 id="သင်ယူမုဆိုင်ရာ_လမ်းေကာင်း">သင်ယူမုဆိုင်ရာ လမ်းေကာင်း</h2> - -<p>You should learn the basics of HTML before attempting any CSS. We recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first. In that module, you will learn about:</p> - -<ul> - <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li> - <li>More advanced <a href="/en-US/docs/Learn/HTML#Modules">HTML modules</a></li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> -</ul> - -<p>Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.</p> - -<p>Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both of which are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module, albeit in a lot more detail.</p> - -<h2 id="သင်ရိုး">သင်ရိုး</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> - <dd>This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> - <dd>Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page and styling lists and links.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> - <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> - <dd>At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now, it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</dd> - <dt>Responsive design (TBD)</dt> - <dd>With so many different types of devices able to browse the web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.</dd> -</dl> - -<h2 id="CSS_ဆိုင်ရာ_ပသနာများဖေရင်းခင်း">CSS ဆိုင်ရာ ပသနာများဖေရင်းခင်း</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.</p> - -<p>From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!</p> - -<h2 id="ပိုမိုလေ့လာရန်">ပိုမိုလေ့လာရန်</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> - <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> -</dl> |