对齐项目,证明内容不正常

时间:2016-01-27 11:48:58

标签: html css css3 flexbox

我想在最后一行中制作2 ul { display: flex; margin: 0 auto; padding: 0; width: 800px; list-style: none; flex-wrap: wrap; background-color: red; justify-content: space-between; } li { display: flex-item; padding: 15px 0; transition: transform .5s ease-in-out; transform: scale(1); margin: 10px auto; background-color: blue; width: 150px; } ,彼此相邻,而不是在中间。我正在使用flex,因此它可以在较小的屏幕中响应。

http://codepen.io/anon/pen/VexZQK

package 
{
    import com.archicruise.external.RoomManager;
    import com.archicruise.server.Connection;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.LoaderInfo;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.system.Security;
    import flash.system.System;

    public class Main extends Sprite 
    {
        [Embed(source = '../assets/client_back.png')] private static const clientBackImage:Class;

        public static var SITE_URL:String = "http://localhost/archicruise/";

        public var roomLoader:RoomManager;
        private var connection:Connection;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            //Add client background
            addChild(new clientBackImage() as Bitmap);

            //Got an SSO ticket?
            var ssoTicket:String = LoaderInfo(this.root.loaderInfo).parameters["sso"];
            if (ssoTicket == "" || ssoTicket == null) ssoTicket = "2e44550b0d6e98cc9f26c39e53213e24";

            //Initialize the connection
            Security.allowDomain("*");
            connection = new Connection("localhost", 9339, this, ssoTicket);;
        }

    }

}

1 个答案:

答案 0 :(得分:0)

你可以尝试这个:\

ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 800px;
  list-style: none;
  flex-wrap: wrap;
  background-color: red;
  justify-content: space-between;
  display:inline-block;
}

li {
  display: flex-item;
  padding: 15px 0;
  transition: transform .5s ease-in-out;
  transform: scale(1);
  margin: 10px auto;
  background-color: blue;
  width: 150px;
  display:inline-block;
}

DEMO HERE