On Github korearice / flexbox
Created by UIT개발실 / MinKyoungHwan
이 발표자료는 크롬브라우저/1280*800 해상도에 최적화 되있습니다
1. 화면은 방향키로 이동할 수 있습니다. 메인 콘텐츠는 방향키 '좌/우(↑/↓)', 서브 콘텐츠는 방향키 '위/아래(↑/↓)'로 이동가능합니다 2. full 화면은 'f'키를 눌러주세요
#speaker { Name : 민경환 대리 Team : UIT 개발실 E-mail : kyounghwan.min@nhn.com Project : 네이버 포스트, 스마트에디터, 'webkit 사전' 서적 집필중 } #speaker:description { content : '만나서 반가워요 :)’ }
Photo Credit: @yakobusan Jakob Montrasio 孟亚柯 via Compfight cc
Photo Credit: kevin dooley via Compfight cc
Photo Credit: NathanaelBC via Compfight cc
레이아웃은 더 다양한 환경에 최적화되야 한다
레이아웃이 좀더 유연할 순 없을까?
요소들의 배치 방향을 손쉽게 설정할 수 있습니다
요소들의 정렬을 손쉽게 설정할 수 있습니다
요소들의 배치 순서를 정할 수 있습니다
활용할 수 있는 공간을 자동으로 계산합니다
플렉스박스는 컨테이너 태그와 아이템 태그로 나뉩니다
<ul> <li>I'm First</li> <li>I'm Second</li> <li>I'm Third</li> <li>I'm Fourth</li> </ul>
ul{}
<ul> <li>intro</li> <li>business</li> <li>project</li> <li>contact us</li> </ul>
ul{}
<div class="wrap"> <ol class="code_sample3"> <li>first!</li> <li>second!</li> <li>third!</li> </ol> <form class="type_area"> <input placeholder="Type your message here" size="50"> <button>submit</button> </form> </div>
div{}
<div> <article>flex menu</article> <ul class="nav"> <li>1depth <ul> <li>menu 1-1</li> <li>menu 1-2</li> <li>menu 1-3</li> </ul> </li> <li>2depth <ul> <li>menu 2-1</li> <li>menu 2-2</li> <li>menu 2-3</li> </ul> </li> <li>3depth <ul> <li>I am menu 3-1</li> <li>I am menu 3-2</li> <li>I am menu 3-3</li> </ul> </li> </ul> </div>
div{}
<div class="wrap"> <header>1. header</header> <div> <article>2. main</article> <nav>3. nav</nav> <aside>4. aside</aside> </div> <footer>5. footer</footer> </section>
.wrap{}
<div class="recipes_wrap"> <header class="tit_recipes"><h1><span class="recipe">Recipe</span><span class="planner">Planner</span></h1></header><div id="calendar"><form id="weekform" method="get" target="_blank" action=""><table id="week"><thead><tr><th>Sunday </th><th>Monday </th><th>Tuesday </th><th>Wednesday </th><th>Thursday </th><th>Friday </th><th>Saturday </th></tr></thead><tbody><tr><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td></tr><tr><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td></tr><tr><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td></tr></tbody></table></form></div><div class="recipe-container"><ul class="recipes"><li id="id27" data-servings="2" draggable="true">Almond Caesar salad with croutons</li><li id="40" data-servings="2" draggable="true">Apple Carrot Salad</li><li id="id20" data-servings="1" draggable="true">Apple-Brie Panini</li><li id="id57" data-servings="6" draggable="true">Artichoke, Leek, and Potato Casserole</li><li id="29" data-servings="4" draggable="true">Awesome Rice Salad</li><li id="id89" data-servings="8" draggable="true">Baby Brussels sprouts with wild rice and pecans</li><li id="id220" data-servings="10" draggable="true">Baked Beans</li><li id="2" data-servings="6" draggable="true">Baked Shrimp Scampi</li><li id="id105" data-servings="4" draggable="true">Baked eggs and beans on toast</li><li id="id6" data-servings="2" draggable="true">Basil-Lime Vinaigrette</li><li id="1" data-servings="4" draggable="true">Beef Stroganoff with Buttered Noodles</li><li id="48" data-servings="1" draggable="true">Berry Sauce</li><li id="55" data-servings="1" draggable="true">Best Oatmeal Ever</li><li id="id32" data-servings="4" draggable="true">Black bean and cheese tacos</li><li id="id173" data-servings="4" draggable="true">Black bean salad with avocado lime dressing</li><li id="59" data-servings="1" draggable="true">Blood Oxygen Smoothie</li><li id="47" data-servings="2" draggable="true">Blueberry Bliss Smoothie</li><li id="54" data-servings="1" draggable="true">Breakfast Mediterranean Burrito</li><li id="id58" data-servings="4" draggable="true">Broccoli with Parmesan and Walnuts</li><li id="id46" data-servings="2" draggable="true">Brown rice, chickpea, feta, and mint salad</li><li id="id31" data-servings="1" draggable="true">Brussels Sprout Salad</li><li id="id112" data-servings="8" draggable="true" class="dragging">Caesar Salad Dressing</li><li id="id59" data-servings="2" draggable="true">Cauliflower Puree</li><li id="id60" data-servings="4" draggable="true">Cauliflower Risotto</li><li id="19" data-servings="4" draggable="true">Chicken Parmesan Salad</li><li id="50" data-servings="1" draggable="true">Chickpea and Kale Bowl</li><li id="id162" data-servings="4" draggable="true">Chickpea salad and cilantro pesto</li><li id="id200" data-servings="4" draggable="true">Chopped Salad</li><li id="id17" data-servings="4" draggable="true">Citrus Rice Salad</li><li id="id50" data-servings="6" draggable="true">Cocktail Sauce</li><li id="id176" data-servings="10" draggable="true">Coffee, hazelnut, and banana granola</li><li id="id35" data-servings="4" draggable="true">Creamy tomato soup</li><li id="id151" data-servings="4" draggable="true">Dang cold Asian noodle salad</li><li id="id196" data-servings="8" draggable="true" class="dragging">Drop biscuits (Cook's Illustrated)</li><li id="id207" data-servings="6" draggable="true">Easy chickpea and vegetable curry</li><li id="id23" data-servings="2" draggable="true">Exercise Rejuvenator</li><li id="16" data-servings="12" draggable="true">Flaky Buttermilk Biscuits</li><li id="id132" data-servings="6" draggable="true">French onion soup</li><li id="15" data-servings="4" draggable="true">Greek Salad</li><li id="id41" data-servings="2" draggable="true">Green Goodness</li><li id="id134" data-servings="4" draggable="true">Green pea soup with cheddar scallion panini</li><li id="id19" data-servings="2" draggable="true">Green-packed Stir Fry with Fresh Herbs</li><li id="17" data-servings="4" draggable="true" class="dragging">Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese</li><li id="id48" data-servings="4" draggable="true">Grilled Salmon with Herb and Meyer Lemon Compound Butter</li><li id="id14" data-servings="4" draggable="true">Grilled garlic-lime fish tacos</li><li id="id156" data-servings="4" draggable="true">Grilled salmon gyros</li><li id="id159" data-servings="4" draggable="true">Grilled salmon sushi rice bowl</li><li id="28" data-servings="1" draggable="true">Guacamole</li><li id="id51" data-servings="2" draggable="true">Heinz Chili Sauce</li><li id="id167" data-servings="4" draggable="true">Herb crusted salmon with spinach salad</li><li id="id157" data-servings="4" draggable="true">Homemade ponzu sauce</li><li id="id22" data-servings="4" draggable="true">Hot Cocoa</li><li id="id150" data-servings="4" draggable="true">Japanese style grilled salmon</li><li id="60" data-servings="2" draggable="true">Kale, Chard, and Hempseed Salad</li><li id="id221" data-servings="8" draggable="true">Lemonade</li><li id="id8" data-servings="8" draggable="true">Lentil Soup</li><li id="id174" data-servings="4" draggable="true">Linguine with asparagus and egg</li><li id="35" data-servings="2" draggable="true">Live Granola</li><li id="56" data-servings="2" draggable="true">Lovely Lentils</li><li id="id34" data-servings="4" draggable="true">Marinara Sauce</li><li id="id195" data-servings="4" draggable="true">Marinated feta, spinach & poached egg salad</li><li id="21" data-servings="2" draggable="true">Mexican Ensalada</li><li id="id54" data-servings="24" draggable="true">Monster Hot Chocolate</li><li id="id16" data-servings="4" draggable="true">Morning Muesli</li><li id="id40" data-servings="2" draggable="true">Muscle Maximizer</li><li id="id47" data-servings="4" draggable="true">Mushroom-onion stuffed potatoes</li><li id="id9" data-servings="1" draggable="true">Natural sports drink</li><li id="12" data-servings="6" draggable="true">Old Fashion Vegetable Soup</li><li id="id56" data-servings="4" draggable="true">One-Pot Curried Cauliflower Rice</li><li id="13" data-servings="6" draggable="true">Onion Pie</li><li id="id171" data-servings="4" draggable="true">Orecchiette with roasted cauliflower</li><li id="id30" data-servings="6" draggable="true">Oregano Marinated Chicken</li><li id="id43" data-servings="6" draggable="true">Parker's split pea soup</li><li id="id55" data-servings="4" draggable="true">Peanut Noodle Salad</li><li id="id118" data-servings="1" draggable="true">Pecan Pie</li><li id="id185" data-servings="10" draggable="true">Pecan molasses granola</li><li id="id99" data-servings="10" draggable="true">Pesto</li><li id="id25" data-servings="4" draggable="true">Pesto Orzo with Peas</li><li id="id64" data-servings="4" draggable="true">Pizza bianca</li><li id="23" data-servings="1" draggable="true">Popeye's Green Drink</li><li id="51" data-servings="1" draggable="true">Popeye's Muscle Salad</li><li id="11" data-servings="4" draggable="true">Pot Roast Carbonnade</li><li id="38" data-servings="1" draggable="true">Quinoa Banana Breakfast</li><li id="id86" data-servings="4" draggable="true">Raspberry-lemon thumbprint cookies</li><li id="id133" data-servings="4" draggable="true">Red lentil soup with sage and bacon</li><li id="id106" data-servings="4" draggable="true">Rice with almond pesto and beans</li><li id="id45" data-servings="6" draggable="true">Roasted Salmon with Walnut-Pepper Relish</li><li id="id53" data-servings="1" draggable="true">Roasted Shallot Vinaigrette</li><li id="id26" data-servings="6" draggable="true">Roasted potatoes and tomatoes</li><li id="id168" data-servings="4" draggable="true">Roasted salmon with white wine sauce</li><li id="62" data-servings="4" draggable="true">Roquefort Cheese Sauce</li><li id="id172" data-servings="2" draggable="true">Salsa fresca</li><li id="3" data-servings="2" draggable="true">Sauteed Beef Tips with Shiitake</li><li id="id29" data-servings="2" draggable="true">Schnitzel</li><li id="18" data-servings="1" draggable="true">Sherry Vinaigrette</li><li id="id21" data-servings="4" draggable="true">Shredded Green Beans</li><li id="id125" data-servings="1" draggable="true">Simple syrup</li><li id="8" data-servings="3" draggable="true">Smoked Salmon Ebelskivers</li><li id="id65" data-servings="10" draggable="true">Smokey Sweet-Potato Soup</li><li id="id206" data-servings="4" draggable="true">Smoky white bean and arugula panini</li><li id="id38" data-servings="4" draggable="true">Soba salad with asparagus and shrimp</li><li id="10" data-servings="4" draggable="true">Spaetzle</li><li id="id28" data-servings="4" draggable="true">Spiced Apple Sauce</li><li id="id15" data-servings="2" draggable="true">Spicy Rice Balls</li><li id="42" data-servings="2" draggable="true">Spinach and avocado salad with sesame wasabi dressing</li><li id="id109" data-servings="8" draggable="true">Spinach lasagna with mushroom ragu</li><li id="id52" data-servings="2" draggable="true">Spinach soufflé</li><li id="id11" data-servings="8" draggable="true">Spring Shells and Cheese</li><li id="id13" data-servings="4" draggable="true">Spring-vegetable and chickpea soup</li><li id="61" data-servings="2" draggable="true">Steakhouse steaks</li><li id="63" data-servings="6" draggable="true">Stove top mac and cheese</li><li id="id18" data-servings="4" draggable="true">Straw and Hay Fettuccine Tangle</li><li id="20" data-servings="1" draggable="true">Super Greens Salad</li><li id="32" data-servings="1" draggable="true">Super Protein Salad</li><li id="id158" data-servings="4" draggable="true">Sushi rice</li><li id="30" data-servings="2" draggable="true">Sweet Almond Date Smoothie</li><li id="52" data-servings="2" draggable="true">Sweet Green Goodness</li><li id="57" data-servings="4" draggable="true">Sweet Mashed Potatoes</li><li id="34" data-servings="2" draggable="true">Sweet and Savory Sea Wrap</li><li id="id104" data-servings="4" draggable="true">Tex-mex rice and black eyed peas</li><li id="31" data-servings="2" draggable="true">The Ironman Smoothie</li><li id="id1" data-servings="24" draggable="true">The Original Chex Party Mix</li><li id="36" data-servings="2" draggable="true">The Shake</li><li id="22" data-servings="2" draggable="true">The Ultimate Green Smoothie</li><li id="id39" data-servings="4" draggable="true">Tofu and Sweet Potato Jambalaya</li><li id="44" data-servings="2" draggable="true">Tomato Avocado Salad</li><li id="5" data-servings="4" draggable="true">Tomato Basil Soup (La Madeleine copycat)</li><li id="id36" data-servings="4" draggable="true">Triple Grilled Cheese</li><li id="26" data-servings="2" draggable="true">Tropical Nut Smoothie</li><li id="id12" data-servings="4" draggable="true">Vegetable Stock</li><li id="id5" data-servings="6" draggable="true">Vegetarian Chili</li><li id="id37" data-servings="4" draggable="true">Vegetarian Steamed Dumplings</li><li id="id107" data-servings="4" draggable="true">Warm shrimp and potato salad</li><li id="id44" data-servings="2" draggable="true">Wild Mushroom Risotto</li><li id="id24" data-servings="2" draggable="true">Zucchini Salad</li></ul><hr><ul class="recipes"><li id="id223" data-servings="8" draggable="true">Apple brandy brown betty</li><li id="id119" data-servings="2" draggable="true">Asian Salad</li><li id="id164" data-servings="12" draggable="true">Avocado feta dip</li><li id="id201" data-servings="8" draggable="true">Baby lamb chops with lemon</li><li id="id135" data-servings="4" draggable="true">Beef and coconut soup with crispy shallots</li><li id="id130" data-servings="4" draggable="true">Black bean soup</li><li id="id148" data-servings="6" draggable="true">Blood orange cocktails</li><li id="id91" data-servings="4" draggable="true">Braised lamb chops with red wine and figs</li><li id="id136" data-servings="8" draggable="true">Broccoli soup with cheddar toasts</li><li id="id128" data-servings="42" draggable="true">Broken glass cupcakes</li><li id="id219" data-servings="8" draggable="true">Brown sugar buttermilk pie</li><li id="id192" data-servings="4" draggable="true">Brussels sprouts with maple and cayenne</li><li id="id229" data-servings="4" draggable="true">Cajun mac and cheese</li><li id="id124" data-servings="6" draggable="true">Cannellini and Kale Soup</li><li id="id94" data-servings="14" draggable="true">Carrot currant muffins</li><li id="id98" data-servings="8" draggable="true">Cauliflower, red onion, and chestnut tart</li><li id="id213" data-servings="24" draggable="true">Cheese crackers</li><li id="id108" data-servings="4" draggable="true">Cherry couscous pudding</li><li id="id177" data-servings="10" draggable="true">Cherry lime granola</li><li id="id73" data-servings="6" draggable="true">Cherry-lime cups</li><li id="id140" data-servings="2" draggable="true">Chervil cream</li><li id="id62" data-servings="4" draggable="true">Chicken koftas with cucumbers and yogurt</li><li id="id78" data-servings="6" draggable="true">Chile-spiced steak and grilled onion tacos</li><li id="id210" data-servings="6" draggable="true">Chiles Rellenos</li><li id="id184" data-servings="4" draggable="true">Chili Lemon Cauliflower</li><li id="id234" data-servings="8" draggable="true">Chocolate babka</li><li id="id199" data-servings="8" draggable="true">Chocolate banana ice cream pie</li><li id="id145" data-servings="9" draggable="true">Chocolate cheesecake squares</li><li id="id110" data-servings="8" draggable="true">Chocolate chestnut mousse</li><li id="id146" data-servings="6" draggable="true">Chocolate cinnamon pudding</li><li id="id235" data-servings="1" draggable="true">Chocolate ice cubes</li><li id="id169" data-servings="12" draggable="true">Chocolate-Hazelnut Icebox Cake</li><li id="id231" data-servings="6" draggable="true">Cocoa rubbed steak with bacon whiskey gravy</li><li id="id83" data-servings="12" draggable="true">Coconut lime semifreddo</li><li id="id137" data-servings="4" draggable="true">Coconut shrimp soup</li><li id="id95" data-servings="16" draggable="true">Cranberry almond muffins</li><li id="id181" data-servings="2" draggable="true">Creamy artichoke dip</li><li id="id69" data-servings="16" draggable="true">Creamy blue cheese dressing</li><li id="id138" data-servings="8" draggable="true">Creamy caramelized onion soup</li><li id="id70" data-servings="16" draggable="true">Creamy peppercorn-Parmesan dressing</li><li id="id68" data-servings="16" draggable="true">Creamy ranch dressing</li><li id="id67" data-servings="16" draggable="true">Creamy roasted garlic dressing</li><li id="id224" data-servings="4" draggable="true">Creamy shiitake alfredo</li><li id="id147" data-servings="8" draggable="true">Creepy crawly cake</li><li id="id217" data-servings="4" draggable="true">Crispy chicken and apple salad</li><li id="id7" data-servings="6" draggable="true">Curried Carrot Soup</li><li id="id4" data-servings="2" draggable="true">Emeril Essence Creole Seasoning</li><li id="id63" data-servings="6" draggable="true">Emeril's strawberry lemonade</li><li id="id71" data-servings="4" draggable="true">Feta-stuffed BLT burgers</li><li id="id81" data-servings="4" draggable="true">Frozen chocolate mousse trifles</li><li id="id82" data-servings="4" draggable="true">Frozen lemon souffle</li><li id="id129" data-servings="5" draggable="true">Garlic-Pepper Sauce</li><li id="id88" data-servings="8" draggable="true">Glazed carrots</li><li id="id116" data-servings="3" draggable="true">Gluten-free chocolate chips cookies</li><li id="id165" data-servings="6" draggable="true">Goat cheese and mushroom stuffed chicken breasts</li><li id="9" data-servings="12" draggable="true">Godiva Angel Pie</li><li id="14" data-servings="10" draggable="true">Godiva Dark Chocolate Cheesecake</li><li id="id183" data-servings="18" draggable="true">Gooey layered everything bars</li><li id="id203" data-servings="4" draggable="true">Granitaville</li><li id="id49" data-servings="4" draggable="true">Greek yogurt with homemade honeycomb</li><li id="id76" data-servings="4" draggable="true">Green bean, tomato, and chickpea salad</li><li id="id66" data-servings="16" draggable="true">Green goddess dressing</li><li id="id61" data-servings="4" draggable="true">Grilled salmon and cucumbers</li><li id="id85" data-servings="4" draggable="true">Grilled zucchini with buttermilk-basil dressing</li><li id="id3" data-servings="4" draggable="true">Handmade Pasta</li><li id="id142" data-servings="8" draggable="true">Harvest pumpkin soup</li><li id="id212" data-servings="6" draggable="true">Hawaiian style short ribs</li><li id="id97" data-servings="2" draggable="true">Hazelnut pastry dough</li><li id="id96" data-servings="16" draggable="true">Hazelnut pear muffins</li><li id="id139" data-servings="4" draggable="true">Hearty spinach and chickpea soup</li><li id="id131" data-servings="6" draggable="true">Homemade beef stock</li><li id="id117" data-servings="16" draggable="true">Homemade candy canes</li><li id="id122" data-servings="4" draggable="true">Homemade sausage</li><li id="id126" data-servings="4" draggable="true">Hot and nutty whiskey sours</li><li id="id228" data-servings="4" draggable="true">Indian Chicken Wrap</li><li id="id33" data-servings="6" draggable="true">Joan's Broccoli Madness</li><li id="7" data-servings="12" draggable="true">John Thorne's Pecan Pie</li><li id="id114" data-servings="1" draggable="true">Kalitsounia Kritis: Sweet Cheese Pastries from Crete</li><li id="id115" data-servings="1" draggable="true">Koulourakia - Greek Butter Cookies with Sesame</li><li id="id160" data-servings="8" draggable="true">Lamb shepard's pie</li><li id="id180" data-servings="4" draggable="true">Lamb, potato, and leek stew</li><li id="id233" data-servings="48" draggable="true">Lemon white chocolate cookies</li><li id="id198" data-servings="8" draggable="true">Light Italian dressing</li><li id="id197" data-servings="8" draggable="true">Light ranch dressing</li><li id="id144" data-servings="8" draggable="true">Lighter macaroni and cheese</li><li id="id218" data-servings="10" draggable="true">Maple brown butter semifreddo</li><li id="id113" data-servings="1" draggable="true">Melomakarona - Honey Cookies with Walnuts</li><li id="id222" data-servings="4" draggable="true">Mushroom and lentil soup</li><li id="id141" data-servings="12" draggable="true">Mushroom soup</li><li id="id80" data-servings="12" draggable="true">No-churn vanilla ice cream</li><li id="id166" data-servings="10" draggable="true">PB&J Tiramisu</li><li id="id121" data-servings="4" draggable="true">Pasta with roasted vegetables and bacon</li><li id="id101" data-servings="1" draggable="true">Pate brisee</li><li id="id190" data-servings="8" draggable="true">Pear and chocolate brioche bread pudding</li><li id="id189" data-servings="6" draggable="true">Pear and cranberry crisp</li><li id="id204" data-servings="8" draggable="true">Pickled red onions</li><li id="id77" data-servings="4" draggable="true">Pork carnitas tacos</li><li id="id191" data-servings="4" draggable="true">Potato hash with spinach and eggs</li><li id="id186" data-servings="4" draggable="true">Pressed ham and pear sandwiches</li><li id="id123" data-servings="24" draggable="true">Pretzel shortbread bar</li><li id="id226" data-servings="10" draggable="true">Pumpkin chocolate whoopie pies</li><li id="id90" data-servings="10" draggable="true">Pumpkin mousse</li><li id="id154" data-servings="1" draggable="true">Red cabbage slaw</li><li id="id205" data-servings="4" draggable="true">Red sangria</li><li id="id161" data-servings="1" draggable="true">Roasted cauliflower and white beans</li><li id="id74" data-servings="3" draggable="true">Roasted salsa</li><li id="id215" data-servings="4" draggable="true">Roasted sweet potato salsa</li><li id="id193" data-servings="4" draggable="true">Roasted sweet potatoes and bacon</li><li id="id209" data-servings="6" draggable="true">Rose sangria</li><li id="id187" data-servings="4" draggable="true">Salmon and potatoes in tomato sauce</li><li id="id202" data-servings="8" draggable="true">Salmon rillettes with tomato salad</li><li id="id179" data-servings="8" draggable="true">Salmon with brown sugar and mustard glaze</li><li id="id93" data-servings="12" draggable="true">Salted caramel six layer chocolate cake</li><li id="id194" data-servings="4" draggable="true">Salted chocolate milk</li><li id="id100" data-servings="8" draggable="true">Sausage-stuffed red onions</li><li id="id225" data-servings="6" draggable="true">Shiitake and egg tart</li><li id="id216" data-servings="8" draggable="true">Shredded Brussels sprouts with pancetta</li><li id="id163" data-servings="4" draggable="true">Shrimp and cabbage stir fry</li><li id="id75" data-servings="4" draggable="true">Shrimp and edamame with lime</li><li id="id227" data-servings="4" draggable="true">Sicilian cauliflower pasta</li><li id="id182" data-servings="10" draggable="true">Simple lemon cake</li><li id="id153" data-servings="1" draggable="true">Smoke chili sauce</li><li id="id170" data-servings="6" draggable="true">Smoky Yukon Gold Potato Chowder</li><li id="id155" data-servings="4" draggable="true">Sour Orange BBQ'd Salmon Taco with Red Cabbage Slaw and Smoked Chile Sauce</li><li id="id152" data-servings="1" draggable="true">Sour orange BBQ sauce</li><li id="id175" data-servings="8" draggable="true">Spanakopita</li><li id="id102" data-servings="4" draggable="true">Spanish turkey sandwich</li><li id="id143" data-servings="4" draggable="true">Spiced chickpea and tomato soup</li><li id="id120" data-servings="4" draggable="true">Spicy Parmesan Kettle Chips</li><li id="id111" data-servings="6" draggable="true">Spicy sauteed kale with lemon</li><li id="id178" data-servings="4" draggable="true">Spinach and pear salad with lamb</li><li id="id149" data-servings="8" draggable="true">Stout short rib potpie</li><li id="4" data-servings="4" draggable="true">Strawberries Romanov (La Madeleine copycat)</li><li id="id79" data-servings="12" draggable="true">Strawberries and cream bars</li><li id="id84" data-servings="12" draggable="true">Sweet cherry granita</li><li id="id211" data-servings="6" draggable="true">Sweet potato fries with brown-butter marshmallow sauce</li><li id="id127" data-servings="10" draggable="true">Three cheese macaroni</li><li id="id92" data-servings="10" draggable="true">Three tier candied pecan cake with brown butter pears</li><li id="id232" data-servings="10" draggable="true">Towering flourless chocolate cake</li><li id="id188" data-servings="4" draggable="true">Turkey cutlets with balsamic pears</li><li id="id103" data-servings="4" draggable="true">Turkey honey avocado BLT</li><li id="id214" data-servings="2" draggable="true">Vegetable egg scramble with feta</li><li id="id230" data-servings="4" draggable="true">Veggie burger pockets</li><li id="id208" data-servings="6" draggable="true">White sangria</li><li id="id72" data-servings="4" draggable="true">Zucchini fries</li></ul></div> </div>
.recipes_wrap{} .recipe-container{}
플렉스박스를 더욱 풍부하게 쓰려면?
flex-wrap:nowrap
flex-wrap:wrap
flex-wrap:wrap-reverse
Masonry layout?
Usually say "Pinterest layout"
<div class="flexbox"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> <div class="item13">13</div> <div class="item14">14</div> <div class="item15">15</div> <div class="item16">16</div> <div class="item17">17</div> <div class="item18">18</div> <div class="item19">19</div> <div class="item20">20</div> <div class="item21">21</div> <div class="item22">22</div> <div class="item23">23</div> <div class="item24">24</div> <div class="item25">25</div> <div class="item26">26</div> <div class="item27">27</div> <div class="item28">28</div> </div>
.flexbox{}
.page-wrap { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }